Ant Design 的 DatePicker 不能接收 string 值,使用 Form 的 initialValues 初始化时报错:date.clone is not a function

2020-12-10 14:57 阅读

Ant Design 出于设计的考量,某一类型的控件只能接收某一类型的值。比如Input的value为string类型,InputNumber的value为number类型,同样的DatePicker的value则为moment类型。

这样的设计无可厚非,并且还考虑到了日期格式不一致的转换问题,甚至更换日期类库的问题。但实际使用中却存在一些不便利的情况,服务器返回的日期数据基本为字符串类型。官方给出的建议是先对服务器返回的日期数据进行处理,转换为moment类型。但这样无疑增加了代码量,造成使用不便利。

github中有issue讨论过这个问题:4.0.0 form组件使用initialValues 初始化数据,当包含“date”数据时,DatePicker组件报错“date.clone is not a function”

帖中的提问者最后通过自定义组件解决这个问题。这是个不错的思路,这里给出一个更完善的自定义组件代码。这要求服务器返回的日期数据必须是标准的格式,能够直接被moment处理。

import React, {FC} from 'react';
import {DatePicker} from 'antd';
import {DatePickerProps} from "antd/es/date-picker";
import moment from "moment";

const DatePicker2: FC<DatePickerProps> = props => {
  const {value, defaultValue, ...rest} = props;
  const dateValue = value && typeof value === 'string' ? moment(value) : value;
  const defaultDateValue = defaultValue && typeof defaultValue === 'string' ? moment(defaultValue) : defaultValue;
  return <DatePicker value={dateValue} defaultValue={defaultDateValue} {...rest}/>;
};
export default DatePicker2
咨询
交流群
电话