首先,采用 antd
中的 DatePicker
组件可以实现日期选择器的功能,同时,针对我们需要的需求——禁止选择当天之前的日期,我们可以采用以下方法来进行实现。
在 DatePicker
中,我们可以通过设置 disabledDate
属性来禁用某些日期。这个属性可以接受一个函数作为参数,用于返回需要禁用的日期数组,或者一个布尔值用于判断是否禁用当前日期。在这里我们可以自定义一个函数来返回需要禁用的日期,方法如下:
function disabledDate(current) {
// 获取当前时间
const currentDate = moment();
// 今天之前的日期均不可选择
return current && current < currentDate.startOf('day');
}
<DatePicker
disabledDate={disabledDate}
// 其他属性省略...
/>
在上面的代码中,我们首先编写了一个函数 disabledDate
,该函数接受当前日期作为参数,并使用 moment()
获取当前日期,并利用 startOf
方法将当前日期的时间部分设置为 0,以保证时间只比较日期部分。接着,我们对传入的日期进行比较,如果小于当前日期,则返回 true
,表示该日期不可选择,否则返回 false
,就可以选择。最后,我们将该方法作为 disabledDate
属性赋值给 DatePicker
组件,这样就实现了禁止选择当天之前的日期的功能。
此外,我们还可以进一步的优化 disabledDate
函数,以允许选择当天,但禁止选择当天之前的时间。实现代码如下:
function disabledDateTime(current) {
// 获取今天的日期
const currentDate = moment().startOf('day');
// 判断是否是今天
if (currentDate.diff(current.startOf('day'), 'days') === 0) {
// 如果是今天,则禁用当前日期之前的时间
return {
disabledHours: () => range(0, 23).filter((hour) => hour < currentDate.hour()),
disabledMinutes: (hour) =>
range(0, 59).filter((minute) => minute < (currentDate.hour() === hour ? currentDate.minute() : 0)),
disabledSeconds: (hour, minute) =>
range(0, 59).filter(
(second) => second < (currentDate.hour() === hour && currentDate.minute() === minute ? currentDate.second() : 0)
)
};
} else {
// 如果不是今天,则所有时间均可选择
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => []
};
}
}
<DatePicker
disabledDateTime={disabledDateTime} // 禁用时间
disabledDate={disabledDate} // 禁用日期
// 其他属性省略...
/>
在上面的代码中,我们首先编写了一个函数 disabledDateTime
,该函数接受当前日期作为参数,并使用 moment()
获取今日的日期(只留下日期部分,时间设置为 0),此时我们需要比较的只是传入日期的时间部分。接着,我们对传入的日期进行比较,如果是今天的日期,则需要禁用当前日期之前的时间;否则所有时间都可以选择。最后,我们采用返回对象的方式返回 disabledHours
,disabledMinutes
和 disabledSeconds
属性,这三个属性分别用于禁用小时、分钟和秒钟,返回值均为一个函数,用于动态地计算需要禁用的范围。在示例中,我们使用 range
函数生成了小时、分钟和秒钟的范围,通过调用 filter
方法筛选出需要禁用的部分即可。
综上所述,以上两种方案应该都可以满足需要,根据具体需求选用即可。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:antd日期选择器禁止选择当天之前的时间操作 - Python技术站