如何在使用date-fns的antd DatePicker中设置默认值

替换后写法 #

直接使用 date-fns 的 parse 方法将日期字符串转换为原生 Date 对象传入即可，对应实现代码如下：

import { parse } from 'date-fns';

const dateFormat = 'yyyy/MM/dd';
<DatePicker defaultValue={parse('2015/01/01', dateFormat, new Date())} format={dateFormat} />

注意事项 #

• date-fns 的格式占位符和 moment 存在差异：年份请用 yyyy、当月天数请用 dd，不要直接复用 moment 的 YYYY/MM/DD 写法，否则会出现解析错误
• parse 方法的第三个参数为基准日期，无特殊需求直接传入 new Date() 即可，用于补全解析时缺失的字段

如果你的默认值是固定值，也可以直接传入原生 Date 对象，省去字符串解析步骤：

// 注意 Date 构造函数的月份参数从 0 开始计数，1月对应 0
<DatePicker defaultValue={new Date(2015, 0, 1)} format="yyyy/MM/dd" />

内容的提问来源于stack exchange，提问作者Prince Agrawal