react + antdesign 日期选择框---实现当前时间之前不可选（包括时分）

最新推荐文章于 2024-07-10 10:28:12 发布

纸飞机162

最新推荐文章于 2024-07-10 10:28:12 发布

阅读量742

点赞数

文章标签： react.js javascript

本文链接：https://blog.csdn.net/qq_56363153/article/details/126448857

版权

实现效果：

限制时间函数：

// 限制天
const disabledDate = (current:Moment) => current && current < moment().startOf('day');

const range = (start: number, end: number) => {
 const result = [];
 for (let i = start; i < end; i++) {
   result.push(i);
 }
 return result;
}

// 限制 时分
const disabledTime = (date:Moment) => {
  const now = moment();
  if (!date || !date.isSame(now, 'd')) {
    return [];
  }
  return {
    disabledHours: () => range(0, now.hour()),
    disabledMinutes: () => range(0, now.minute()),
  };
};

组件：

<FormItem
   labelCol={{ span: 6 }}
   wrapperCol={{ span: 15 }}
   name="expectCompleteTime"
   label="期待完成时间"
   rules={[{ required: true, message: '请选择期待完成时间' }]}
>
   <DatePicker
    showTime={{ format: 'HH' }}
    format="YYYY-MM-DD HH"
    disabledDate={disabledDate}
    disabledTime={disabledTime}
    showNow={false}
    />
</FormItem>