[UI] Antd RangePicker 选择日期控件的使用

import { DatePicker } from "antd";
import moment from "moment";

/* ... */

const dateFormat = 'YYYY-MM-DD';

handleExpirationDate = (date) => {
    const selectedFromDate = date[0]?.format(dateFormat);
    const selectedToDate = date[1]?.format(dateFormat);
    /* 存储value */
    setDateRange([selectedFromDate,selectedToDate]);
}

/* 当天及之后29天日期可选，29天后的日期不可选择 */
disabledDate = (current) => {
    const today = moment(new Date(), dateFormat);
    const tooLate = current.diff(today, 'days') > 28;
    return !!tooLate;
};

/* ... */

<DatePicker.RangePicker
    /* 15以上版本使用datejs代替moment */
    /* value值应与valueDateFormat的格式相同 */
    value={[moment(fromDate, valueDateFormat), moment(toDate, valueDateFormat)]}
    /* 选择日期 */
    onChange={this.handleExpirationDate}
    /* 控件上日期的显示格式 */
    format={dateFormat}
    /* 是否允许清除日期（可赋值false让日期不允许为空）*/
    allowClear={false}
    /* 起止时间是否禁用 */
    disabled={[true, false]}
    /* 限制时间选择的范围 */
    disabledDate={this.disabledDate}
    /* 样式 */
    className={...}
/>