antd RangePicker禁止选择现在之前的时间

342 阅读1分钟

效果如下,我这里是一个精确到时分秒的日期范围选择器,需求是禁选之前的时间

image.png

 const range = (start: number, end: number) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };
  
  function disabledTime(slectData) {//这里有第二个参数`start` | `end`,我这里不需要区分开始结束时间所有不处理
    const now = dayjs();
    let isSameDay = now.isSame(slectData, 'day'); //判断是否是今天,只有今天的时分秒才需要限制
    if (isSameDay) {
      const hour = now.hour(); // 获取当前小时
      const minute = now.minute(); // 获取当前分钟
      const second = now.second(); // 获取当前秒
      return {
        disabledHours: () => range(0, hour),//返回都是数组
        disabledMinutes: () => range(0, minute),
        disabledSeconds: () => range(0, second),
      };
    }
  }
  
  
  <RangePicker disabledTime={disabledTime} disabledDate={(cur) => cur && cur < dayjs().startOf('day')} showTime format="YYYY-MM-DD HH:mm:ss" style={{ width: '300px' }} />
  
  //disabledDate 禁用的日期 年月日,禁用今天之前的日期
  //disabledTime 需要返回disabled的时分秒数组