ant design 組件庫中 經常 用到了DatePicker日期組件,其中在遇到有具體條件日期范圍的時候,需要注意幾點,以下是幾個例子:
1、前端自己規定日期
<DatePicker disabledDate={disabledDate} />const disabledDate = (current) => {
return current && current < moment().endOf(‘day’); // 當天之前的不可選,包括當天return
current < moment().subtract(29, '
days'
) || current > moment(); //
當天之前30天內可選。其他不可選 當天也可選
return current < moment().subtract(30, 'day') || current &¤t.endOf('day') > moment(); // 當天之前30天可選,其他不可選,當天也不能選
};
2、接口傳過來指定日期能選擇,其余禁止
cronDateList為接口傳遞過來的日期數組
<DatePicker size="large" style={{width:'100%'}} disabledDate={(current)=>disabledDate(current,cronDateList)} placeholder="請選擇時間" />
const disabledDate = (current,arr) =>{
let ff = false;
ff = !arr.some((son,index,arr) => {
return current.isSame(son,'day')
})
return ff;
};