ANTD-DatePicker日期选择框

今天按照客户的需求要修改时间日期选择框，在设定disabledDate属性的时候遇到了难题，不过也因此对这个控件更熟悉了一些

样式一 样式二

第一种日期选择框使用起来我认为比较方便，要确定一个时间范围的鼠标点击次数比第二种少的多。所以我暂时也不太明白为什么客户要把样式修改成第二种。

value设置

我一开始是用getFieldDecorator方法对设置初值，其中要注意的是 这里的初值不能用defaultValue，而应该用initialValue。同时第一种样式的值应当用【】括起来，具体的可以看官网：https://ant.design/components/date-picker-cn/#components-date-picker-demo-start-end
{getFieldDecorator('date', { initialValue: [moment(startValue, 'YYYY/MM/DD'), moment(endValue, 'YYYY/MM/DD')] })()
随后在调用方法的时候只要getFieldsValue()就可以啦~
初值的设置也很简单,subtract是减去多少天的意思，注意日期选择框的value必须是moment类型的，所以要import moment from 'moment';
然后const startValue = moment().subtract(8, 'days');

限制用户可以选择的时间

这个官网有案例，但是在写代码的过程中我又遇到了无法选择时间的问题，后来换成extends React.Component方法后得以实现。

其中我修改了disabledEndDate 的值，因为我除了想禁用startdate前的日期的同时也想禁用今天以后的日期以及startdate当日的日期能够上，形成一个闭区间。原先使用&&拼接发现没有效果，百度后换了用+拼接的方法实现了

同时我发现无法再传入一个current值，即= (endValue，current) =>是不行的，console出来的current是没有定义的。就在state里面加了一个today=moment()，ok！实现了！

 disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
            return false;
        }
        let start =  endValue.valueOf() <= startValue.valueOf() && startValue  ;
        let end = endValue.valueOf() > this.state.today;
        return  start + end
    }

【完】