禁用不在当前月范围内的日期
let levelTime = "2024-08-15";
<RangePicker disabledDate={levelTime ? disabledDate : null} format="YYYY-MM-DD" />
// 限制函数
const disabledDate = (current) => {
// 获取当前月第一天和最后一天
const firstDay = moment(levelTime).startOf('day');
const lastDay = moment(levelTime).endOf('month');
// 禁用不在当前月范围内的日期
return current && (current.isBefore(firstDay) || current.isAfter(lastDay));
}
禁用不在当前月范围内的日期,年月日时分
let levelTime = "2024-08-02 11:30";
const [disableTimeObj, setDisableTimeObj] = useState({
baseDay: '2024-08-02', baseDayHH: '11', baseDayMM: '30'
});
<RangePicker
disabledDate={disableDate ? disabledDate : null}
disabledTime={disableDate ? disabledDateTime : null}
showTime
format="YYYY-MM-DD HH:mm"
style={{ width: "100%" }}
/>
// 这一步是我为了分割出来日期跟时、分。大家斟酌使用。
// const baseDay = moment(levelTime).format('YYYY-MM-DD');
// const baseDayHH = moment(levelTime).format('HH');
// const baseDayMM = moment(levelTime).format('mm');
// setDisableTimeObj({baseDay, baseDayHH, baseDayMM});
// 限制日期函数
const disabledDate = (current) => {
// 获取当前月第一天和最后一天
const firstDay = moment(levelTime).startOf('day');
const lastDay = moment(levelTime).endOf('month');
// 禁用不在当前月范围内的日期
return current && (current.isBefore(firstDay) || current.isAfter(lastDay));
}
// 限制时间函数
const disabledDateTime = (time) => {
if (time) {
const thisDay = moment(time).format('YYYY-MM-DD');
const thisHour = moment(time).format('HH');
// 当前选中日期是限制日期,但是,不是限制的小时的时候只限制小时不限制分钟
if (thisDay === disableTimeObj.baseDay && thisHour !== disableTimeObj.baseDayHH) {
return {
disabledHours: () => Array.from({ length: parseInt(disableTimeObj.baseDayHH) }, (_, index) => index),
}
}else if(thisDay === disableTimeObj.baseDay && thisHour === disableTimeObj.baseDayHH) {
// 当前选中日期是限制日期,限制的小时的时候,限制小时、分钟
return {
disabledHours: () => Array.from({ length: parseInt(disableTimeObj.baseDayHH) }, (_, index) => index),
disabledMinutes: () => Array.from({ length: parseInt(disableTimeObj.baseDayMM) }, (_, index) => index)
}
} else{
return {}
}
}else{
return {}
}
}
如果有更好的方法可以推荐一下哦~ 欢迎指正