需求:开始时间和结束时间只能选在一天之内,不能跨天选择。比如开始时间选择为2022年7月20日12点11分06秒,结束时间范围只能选择2022年7月20日12点11分06秒到2022年7月20日23点59分59秒。
解答思路,开始选择的时分秒范围不做限制,当拿到开始的时分秒之后,在开始的时分秒基础上往后推即可,日期(年月日)就是选择开始和结束的日期(年月日)相同即可,主要是时分秒问题。
下图是开始选择的图开始时间选择的如下:
下图是结束时间可选择范围如下:
标签代码如下:
使用的前端技术为React的函数组件,disabledDate是自带控制时间日期的api,disabledTime是控制时分秒的api。
const [dates, setDates] = useState([null, null]);
<RangePicker
onCalendarChange={(val) => setDates(val)}
disabledDate={disabledDate}
disabledTime={disabledTimeRange}
onChange={DatePickerChange}
onOpenChange={() => setDates([null, null])}
format="YYYY-MM-DD HH:mm:ss"
showTime={{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
}}
/>
disabledDate={disabledDate}中括号里的是函数对应代码如下
代码注释如下:
1、禁用可选日期
2、判断选择日期不为空
3、判断选择了开始日期,结束日期没选的时候触发
4、结束时间只能选择和开始时间相同的年月日
5、开始时间没有选择的时候
6、限定只能选择当前日期之后的年月日,包括今天
// 禁用可选日期
const disabledDate = (current) => {
//判断选择日期不为空
if (dates) {
//判断选择了开始日期,结束日期没选的时候触发
if (dates[0] !== null && dates[1] === null) {
//结束时间只能选择和开始时间相同的年月日
return current && moment(current).format('YYYY/MM/DD') != moment(dates[0]).format('YYYY/MM/DD');
//开始时间没有选择的时候
} else if (!dates[0]) {
//限定只能选择当前日期之后的年月日,包括今天
return current && current < moment().subtract(1, 'days').endOf('day');
}
}
};
disabledTime={disabledTimeRange}中括号里的是函数对应代码如下:
代码注释如下:
1、禁止选择的时间
2、当前选择结束时分秒时
3、选择了开始日期时触发
4、dates[0]是选择的开始时间,拿到开始时间的时分秒,在开始的时分秒上,进行限制。
// 禁止选择的时间
const disabledTimeRange = (_, type) => {
//当前选择结束时分秒时
if (type === 'end') {
//选择了开始日期时触发
if (dates) {
//dates[0]是选择的开始时间,拿到开始时间的时分秒,在开始的时分秒上,进行限制。
let flagTime = moment(dates[0]).format('YYYY/MM/DD HH:mm:ss');
let houers = flagTime.split(' ')[1].split(':')[0];
let Minutes = flagTime.split(' ')[1].split(':')[1];
let Seconds = flagTime.split(' ')[1].split(':')[2];
let endflagTime = moment(_).format('YYYY/MM/DD HH:mm:ss');
let houersEnd = endflagTime.split(' ')[1].split(':')[0];
let MinuteEnd = endflagTime.split(' ')[1].split(':')[1];
let SecondEnd = endflagTime.split(' ')[1].split(':')[2];
return {
disabledHours: () => range(0, houers),
disabledMinutes: () => {
if (houersEnd > houers) {
return [0, 60];
} else {
return range(0, Minutes);
}
},
disabledSeconds: () => {
if (MinuteEnd > Minutes || houersEnd > houers) {
return [0, 60];
} else {
return range(0, Seconds);
}
},
};
}
}
};