需求介绍

截止时间初始值晚于当前时间2小时，最晚时间晚于截止时间2小时。
作业提交的截止时间晚于当前时间（当前截止时间前不可选中
作业提交的最晚时间晚于截止时间，且当截止时间改变后，最晚时间也随之改变

效果图

代码

代码片.

const [submitTime, setSubmitTime] = useState(moment().utc().zone(-8).add(2, 'hours').format(dateFormat).toString() as any);  // 作业提交时间
const [deadline, setDeadline] = useState(moment().utc().zone(-8).add(4, 'hours').format(dateFormat).toString() as any);  // 作业最晚时间

const disabledSubmitDate = (current:any) => {return current && current < moment().startOf('day'
}const disabledEndDate = (current:any) => {return current && current < moment(submitTime).startOf('day');
}// 提交时间改变
const onSubmitTimeChange = (value: any, dateString: any) => {setSubmitTime(dateString);setDeadline(moment(dateString).utc().zone(-8).add(2, 'hours').format(dateFormat).toString() as any);
}// 延迟时间改变
const onDeadlineChange = (value: any, dateString: any) => {setDeadline(dateString);
}// 获取当前时间const currentTime = moment().valueOf();const range = (start, end) => {const result:any = [];for (let i = start; i < end; i++) {result.push(i);}return result;};// 截止时间与当前时间牵制
const disabledSubmitTime:any = (dateTime) => { // 判断所选日期与当前日期是否相等  if (moment(dateTime).isSame(moment(currentTime), "day")) {return {disabledHours: () => range(0, moment(currentTime).hour()),disabledMinutes: () =>moment(dateTime).isSame(moment(currentTime), "hour")? range(0, moment(currentTime).minute()): []};}else return [];
};// 最晚时间与截止时间牵制
const disabledEndTime:any = (dateTime) => {if (moment(dateTime).isSame(moment(submitTime), "day")) {return {disabledHours: () => range(0, moment(submitTime).hour()),disabledMinutes: () =>moment(dateTime).isSame(moment(submitTime), "hour")? range(0, moment(submitTime).minute()): []};}else return [];
}

// 两个 DatePicker
<DatePicker allowClear={false}disabledDate = {disabledSubmitDate}showTimeonChange={onSubmitTimeChange}disabledTime={disabledSubmitTime}/><DatePickeallowClear={false}disabledDate = {disabledEndDate}format={dateFormat}showTimeonChange={onDeadlineChange}disabledTime={disabledEndTime}/>

react使用antd实现日期与时间的不可选定相关推荐

react 使用antd的日期选择框中文失效，只有年为中文，其他为英文。
环境: antd: 版本 4.22.4 react:版本 18.2.0 报错截图: 从 antd 引入的 DatePicker 日期选择框,按照国际化配置,全局的引入中文包,但是生效的只有年是中文, ...
团队和做的直观图_直观，可靠的日期和时间处理，终于出现在Java中
团队和做的直观图日期和时间的概念是许多应用程序的基础. 诸如生日,租期,活动时间戳记和商店营业时间之类的东西都是基于日期和时间的,但是Java SE没有很好的API来处理它们. 使用Java SE ...
react+dva+antd的骚操作
文章目录前言: 第一步: 第二步, 第三步, 第四步, 第五步, 第六步, 第七步, 第八步, 第九步, 第10步, 个人博客前言: 原谅我直接跳过react的基础,直接就讲react+dva的实 ...
【转】C/C++中的日期和时间
头文件 time.h 函数用途函数名得到处理器时间 clock 得到时间差 difftime 设置时间 mktime 得到时间 time 得到以ASCII码表示的时间 asctime 得到字符串表 ...
mysql 日期_「5」学习MySQL日期与时间类型发现：要养成注重细节的习惯
在前面的学习中我们提到过字段类型这个概念,本篇的主题就是来讲一种常用而相对复杂的类型:日期与时间. MySQL中表示日期与时间的数据类型有很多种,但主要的不外乎下面五种: 记住上面表中的"范 ...
python正则取字符串日期_python 正则表达式获取字符串中所有的日期和时间
提取日期前的处理 1.处理文本数据的日期格式统一化 text = "2015年8月31日,衢州元立金属制品有限公司仓储公司(以下简称元立仓储公司)成品仓库发生一起物体打击事故,造成直接经济损 ...
linux7设置时间,CentOS 7 设置日期和时间
现代操作系统分为以下两种类型的时钟: 实时时钟(Real-Time Clock,RTC),通常称为硬件时钟(一般是系统主板上的集成电路),它完全独立于操作系统的当前状态,即使在计算机关闭时也能运行. ...
Sql Server函数全解(四)日期和时间函数
阅读目录 1.获取系统当前日期的函数getDate(); 2.返回UTC日期的函数UTCDATE() 3.获取天数的函数DAY(d) 4.获取月份的函数MONTH(d) 5.获取年份的函数YEAR(d ...
Python学习笔记.OS学习笔记 OS操作系统（operating system）（三）日期和时间
日期和时间: 好多库函数: datetime time calendar dateutil ...and so on 日期表示的二义性,很烦人! 1/6/2010 你不知道到底是2010年的1月6日, ...

react使用antd实现日期与时间的不可选定

antd+typescript+react实现日期时间不可选定

需求介绍

效果图

代码

react使用antd实现日期与时间的不可选定相关推荐

最新文章

热门文章