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

最新推荐文章于 2025-03-24 17:51:57 发布

MYG_G

最新推荐文章于 2025-03-24 17:51:57 发布

阅读量4.4k

点赞数 3

分类专栏： antd 文章标签： antd

本文链接：https://blog.csdn.net/qq_40657321/article/details/114081578

版权

antd 专栏收录该内容

24 篇文章

订阅专栏

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: [moment('00:00', 'HH:mm'), moment('23:59', 'HH:mm')],
       }}
       format={'YYYY-MM-DD HH:mm'} // 设置自定义格式
       onChange={onChange}
       value={value}
   />

在这里插入图片描述

2.数据处理自定义格式

在传给后端的时候，也需要是对应的自定义格式，在我们设置RangePicker的format={‘YYYY-MM-DD HH:mm’} 以后，只是页面展示是自定义格式，我们获取到的数据格式还是默认的’YYYY-MM-DD HH:mm:ss’,所以需要对数据处理，上代码：
需要配合moment一起使用
在这里插入图片描述

import moment from 'moment';

createTimeStart: moment(createTime?.[0]).format('YYYY-MM-DD HH:mm'),
createTimeEnd: moment(createTime?.[1]).format('YYYY-MM-DD HH:mm'),

结果如下：
在这里插入图片描述