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

组件返回的日期格式问题

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

tags: Ant Design Pro

关于作者 🌱

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