antd 的RangePicker 返回后端的数据如何格式化

最新推荐文章于 2024-06-27 10:36:58 发布

原创最新推荐文章于 2024-06-27 10:36:58 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#reactjs

收录于

react antd 同时被 2 个专栏收录

4 篇文章

订阅专栏

antdDesign

3 篇文章

订阅专栏

本文介绍如何将Antd的RangePicker组件返回的数据格式化为后端所需的格式。通过使用moment组件，可以将Moment对象转换成标准日期字符串。

antd 的RangePicker 返回后端的数据如何格式化

通过FormItem包裹的RangePicker返回后端数据还不是标准的需要的数据
是这样的

Moment {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Tue Mar 02 2021 11:47:32 GMT+0800 (中国标准时间), …}

要想返回后端需要的格式我们可以引入moment组件然后

item= moment(item).format('YYYY-MM-DD')

然后返回的就是这样的
2021-04-04

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是谁的心儿啊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

daterangepicker中文示例

12-09

daterangepicker是一个好用的时间范围选择插件，基于jquery，本内容是daterangepicker的中文示例

参与评论您还未登录，请先登录后发表或查看评论

antd 时间选择RangePicker回显，编辑修改 react

weixin_47247635的博客

09-24

3005

这个需要给form设置接收值。 const{getFieldProps}=this.props.form const{ createdTime,deadline}=this.state <FormItem label="起止时间：" {...layoutForm}> <RangePicker onChange={this.onChange} style={{ w...

antd RangePicker 格式化 季度 YYYY- QQ 受控组件 / 非受控组件

热门推荐

Carolinedy的博客

12-27

1万+

在使用antd的日期选择器时，发现返回的日期格式是moment的默认格式，但是需求是需要前端给后端传送格式为： startDate = ‘YYYY-MM-DD’ endDate = 'YYYY-MM-DD' 转化前，前端使用 RangePicker 传送的是一个moment格式的 dateRange 值，所以在这里的需要做到两件事：将 dateRange 拆分为startDate 和...

datePicker

qq_43786380的博客

09-28

214

当我们想取到表单中的“Date”值时，发现是一大串字符，结构较为复杂。这时我们可以使用moment方法将时间格式化为想要的格式。在查询详情的时候，经常需要用到从后端查询的时间值返显到DatePicker组件，这时候也是使用moment方法格式化数据。如此即可将时间组件选中的值转换为我们想要的时间字符串的格式。

antd日期选择器限制不可跨年选取时间

weixin_46389390的博客

12-08

1853

antd日期选择器限制不可跨年选取时间

vue a-range-picker回显问题和回显之后值无法改变的问题

qq_35187119的博客

03-07

2716

vue a-range-picker回显问题和回显之后值无法改变的问题

antd Vue --a-range-picker 数据回显时，修改后，视图不更新

weixin_48975689的博客

03-15

1544

原理：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。更换写法之后就可以正常的修改日期范围。

moment在vue的使用

qq_43235503的博客

05-04

1514

moment在vue的使用

Moment.js的基本使用

hnyanzijun1的博客

06-25

325

Moment.js中文官网 <!DOCTYPE html> <html lang="zh"></html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

monmetjs-报错

药酱的博客

03-17

1050

问题： react_devtools_backend.js:2430 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are disco

常用的moment的格式的使用

weixin_45343326的博客

10-24

2738

moment().format(‘YYYY-MM-DD HH:mm:ss’) “2019-10-24 16:41:29” new Date() Thu Oct 24 2019 16:41:38 GMT+0800 (中国标准时间) new Date().toString() “Thu Oct 24 2019 16:41:41 GMT+0800 (中国标准时间)” moment(‘2016-08-31...

antd RangePicker展示+传给后端自定义格式

MYG_G

02-25

4776

antd RangePicker展示+传给后端自定义格式默认格式：年-月-日时-分-秒（YYYY-MM-DD HH:mm:ss’）自定义格式为：年-月-日时-分（YYYY-MM-DD HH:mm’） 1.页面选中时间，展示自定义格式 <RangePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD HH:mm', defaultValue:

＜a_range-picker＞组件选择时间段的使用

I心暖存人T的博客

12-01

7782

仅供学习，不可转载研究了好长时间终于把选择时间段存到数据库和从数据库里面拿出来做到回显给弄明白了，在这里做一个非常详细的笔记，从前端的vue到后端整个的实现过程。效果图思路： 1>首先这个组件的使用比较简单，直接拿过来用就可以了， <a-range-picker style="width: 100%" v-decorator="['Times',validatorRules.trainDate]" format="YYYY-MM-DD" :placeholder="['开始时间', '结

Ant design Vue 相关设置或问题集合（持续更新...）

qq_27387133的博客

05-19

6444

目录 1.日期选择框 datePicker设置可选范围在今天或之前 1.1设置":disabled-date"属性 2.设置select下拉框可以进行输入搜索 2.1设置"show-search"和'option-filter-prop="children"'属性 3.a-form-item标签中的label文字不会自动换行 3.1将label单独写出来并设置white-space样式，不作为属性写在a-form-item标签中 3.2改动后发现行高太大了，怎么办？ 1.日期选择框 d.

vue-antd框架单选框的数据回显问题

weixin_43703816的博客

08-19

3132

vue-antd框架单选框的数据回显问题

vant的Picker 选择器的数据回显

weixin_61978391的博客

03-12

5790

console.log("父级索引:", parentIndex);注意：这个需要计算出父级列和子级列对应的默认索引值，在Picker选择器改变时，可以用getColumnIndex来获取对应的索引值，但是考虑到Picker的对应的columnsregion可以会改变，这样在回显的时候可能会出现数据回显错误的情况，所以可以根据id来查找对应的索引值。