antd日期选择器如何输出特定格式以及设置禁选时间段

案例：在项目中，需要用户选择大于今天的日期，并以"YYYY/MM/DD"的格式传递给后端。

 1、解决日期禁选问题

在官方api中也提到，可以设置disabledDate来实现日期的禁选

 语法：
js中定义disabledData函数

 const disabledDate = (current) => {
       设置禁选范围
 }

在DatePicker 标签中引入

 <DatePicker  disabledDate={disabledDate} />

同时我们要知道antd是默认使用moment.js来实现日期格式化的，文档中有体现

在官网中可以通过moment().endOf(String)方法设置该时间单位的结束
可选的时间单位有day（默认今天）、week（默认本周）、month（默认本月）以及year（默认本年）

 这样我们就可以将该方法运用到disabledDate 函数中

const disabledDate = (current) => {
   return  current <= moment().endOf('day'); // 如果选择时间小于等于今天则禁选。
}
// 当然也可以使用moment().startOf('String') 方法
const disabledDate = (current) => {
   return  current <= moment().startOf('day'); // 不过有个问题就是'今天'仍然可选
}

实现结果：灰色部分为禁选

以day为时间单位	以week为时间单位

2、解决以特定格式输出日期问题

如果不设置输出格式，将会默认输出完整日期 （如上图userBirth字段）

 方法一： moment().format(String) 方法设置格式

userBirth = moment(value.userBirth).format('YYYY/MM/DD');

方法二：moment(String, String) 方法设置，这样设置更加灵活、日期格式可以动态更换（这里的dateFormat格式可以从其他接口获取）

const dateFormat = 'YYYY/MM/DD'; 
userBirth =  moment(value.userBirth , dateFormat);

实现结果

Moment官网https://momentjs.com/