Ant Design中日期選擇器的disabledDate用法


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 &&current.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;
};
 
        
 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM