Antd DatePicker 只允许选择当前时间之后的时间包括时分秒

原创已于 2023-04-27 15:48:18 修改 · 8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #html

于 2020-06-06 17:05:17 首次发布

react 同时被 2 个专栏收录

5 篇文章

订阅专栏

Antd DatePicker

1 篇文章

订阅专栏

本文介绍了一个React组件中如何使用moment库来限制用户只能选择当前时间5分钟后的时间，通过定义disabledDate和disabledDateTime函数实现对日期和时间的选择限制。

需求：选择当前时间之后的时间

1.隐藏“此刻”按钮

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: () => range(0, finalHour),
            disabledMinutes: () => range(0, finalMinute)
          }
        }else if(moment()>current){
        return {
          disabledHours: () => range(0, 24),
          disabledMinutes: () => range(0, 60),
          disabledSeconds: () => range(0, 60)
        }
      }
      }else{
        return {
          disabledHours: () => range(0, 24),
          disabledMinutes: () => range(0, 60),
          disabledSeconds: () => range(0, 60),
        }
      }
};

let taskPlanDate = {
    label:"扫描时间",
    name:"taskPlanDate",
    rules:[{ required: true, message: '扫描目标不能为空!' }]
};
<FormItem {...taskPlanDate}>
    <DatePicker
        disabledDate={disabledDate}
        disabledTime={disabledDateTime}
        showTime={{ defaultValue: moment('YYYY/MM/DD HH:mm:ss') }}
        showNow={false} 
        onOk={(e: any) => {
            console.log(e)
        }}
     />
</FormItem>