记录一次使用 React + Ant Design DatePicker限制时间选择

最新推荐文章于 2024-06-30 16:58:05 发布

原创最新推荐文章于 2024-06-30 16:58:05 发布 · 249 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

React 专栏收录该内容

25 篇文章

订阅专栏

这篇博客探讨了如何在前端应用中实现日期选择器的禁用功能。通过引入`moment.js`库，作者展示了如何设置不同条件来禁用日期选择：包括禁止选择小于当前日期的日期、禁止选择大于当前日期的日期以及禁止选择指定更新创建日期之前的日期。这些功能对于日期输入的验证和用户体验优化具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述
官网文档

需要使用到moment

import moment from 'moment';

  //修改的时间限制
  disabledDateUpdate = (current) => {
    return current && current < moment(this.state.updateCreateDate).endOf('day');
  }

	//当日之后不可选（不包含当日）
	disabledDate (current) {
	    return current && current > moment().endOf('day');
	},
	//当日之前不可选（包含当日）
	disabledDate (current) {
	  return current && current < moment().endOf('day')
	},
	//当日之前不可选（不包含当日）
	disabledDate (current) {
	   return current < moment().subtract(1, 'day')
	}