Ant Design DatePicker 日期选择组件的时间格式化

更新日期: 2022-03-10 阅读次数: 10531 字数: 219 分类: ReactJS

组件返回的日期格式问题

antd 选择日期的控件 DatePicker 是输出的 moment 对象,如:

Date: "2022-03-10T03:33:14.737Z"

解决办法:

// 在 CreateForm 的 onFinish 里加上
if (value.Date) {
  value.Date = moment(value.Date).format('YYYY-MM-DD');
}

服务器返回日期字符串的解析问题

Uncaught TypeError: date.clone is not a function

解决办法:

// 编辑按钮的点击事件里,setCurrentRow 之前加上
if (record.Date) {
  record.Date = moment(record.Date, 'YYYY-MM-DD');
}

DatePicker format 属性不起作用的原因

format 属性,虽然默认值是 YYYY-MM-DD,但是这个只是用于显示的。

并不说返回的是这个格式的字符串。

日期区间过滤

{
  title: "日期区间",
  dataIndex: 'Date',
  valueType: 'dateRange',
  search: {
    transform: (value) => ({
      // 转化值的 key, 一般用于事件区间的转化
      // 如果不转换,就会变成 Time=1&Time=2
      StartDate: value[0],
      EndDate: value[1],
    }),
  },
  hideInTable: true,
},

查询链接格式:

http://localhost:8000/api/admin/getItems?current=1&pageSize=20&StartDate=2022-03-10&EndDate=2022-04-13

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

tags: Ant Design Pro