【react+ts+antd】DatePicker日期选择器不能选择过去的时间(===当前时间之前的时间)

组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{form.getFieldValue('status') === '03' &&
                    getFieldDecorator('timingPublishTime', {
                        initialValue:
                            isEdit && infomentDetail.timingPublishTime
                                ? moment(infomentDetail.timingPublishTime)
                                : moment(),
                        rules: [{ required: true, message: '请选择定时发布时间' }]
                    })(
                        <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            disabledDate={disabledDate}
                            showTime
                            disabledTime={disabledTime}
                        />
                    )}

  

方法:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const range = (start: any, end: any) => {
        const result = [];
        for (let i = start; i < end; i += 1) {
            result.push(i);
        }
        return result;
    };
    // 不可选择以前的时间
    const disabledDate = (currentDate: any) => currentDate && currentDate < moment();
    const disabledTime = (date: any) => {
        const hours = moment().hours();
        const minutes = moment().minutes();
        const seconds = moment().seconds();
        // 当日只能选择当前时间之后的时间点
        if (date && moment(date).date() === moment().date()) {
            return {
                disabledHours: () => range(0, 24).splice(0, hours),
                disabledMinutes: () => range(0, 60).splice(0, minutes + 1),
                disabledSeconds: () => range(0, 60).splice(0, seconds + 1)
            };
        }
        return {
            disabledHours: () => [],
            disabledMinutes: () => [],
            disabledSeconds: () => []
        };
    };

  

posted @   芝麻小仙女  阅读(2111)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示