Antd DatePicker 只允許選擇當前時間之後的時間 包括時分秒

 需求:選擇當前時間之後的時間

1.隱藏“此刻”按鈕

這裏用的css隱藏,沒找到更好的辦法。。

前提--設置日期組件的屬性:dropdownClassName="hideNow"  

.hideNow{
    .ant-picker-now-btn{
        display:none !important;
    }
}

2.只允許選擇當前時間5分鐘之後的時間 

import moment from 'moment';

let disabledDate = (current:any) => {
    return current && current < moment().subtract(1, 'days').endOf('day');
};
let range = (start:any, end:any) => {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
}, 
let disabledDateTime = (current:any)=>{
      if(current){
        let today = moment().date();
        if(today == current.date()){
          let minute = Number(moment().minutes())
          let hour = Number(moment().hour());
          let finalHour:number,finalMinute:number;
          if(current.hour() > hour ){
            finalMinute = 0
          }else{
            if(current.minute() >= 58){
              finalHour = hour + 1;
              finalMinute = 0; 
            }else{
              finalHour = hour;
              finalMinute = minute + 5;
            }
          }
          return {
            disabledHours: () => searchAction.range(0, finalHour),
            disabledMinutes: () => searchAction.range(0, finalMinute)
          }
        }
      }else{
        return {
          disabledHours: () => searchAction.range(0, 24),
          disabledMinutes: () => searchAction.range(0, 60),
          disabledSeconds: () => searchAction.range(0, 60),
        }
      }
};

let taskPlanDate = {
    label:"掃描時間",
    name:"taskPlanDate",
    rules:[{ required: true, message: '掃描目標不能爲空!' }]
};
<FormItem {...taskPlanDate}>
    <DatePicker
        dropdownClassName="hideNow"
        disabledDate={disabledDate}
        disabledTime={disabledDateTime}
        showTime={{ defaultValue: moment('YYYY/MM/DD HH:mm:ss') }}
        onOk={(e: any) => {
            console.log(e)
        }}
     />
</FormItem>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章