antd中DatePicker的disabledDate和disabledTime属性

import { DatePicker } from 'antd';
import moment from 'moment';

const range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

const disabledTime = date => {
    const hour = moment().hours(); // 获取当前的小时
    const min = moment().minutes(); // 获取当前的分钟
    const second = moment().seconds(); // 获取当前秒
    if (date?.format('YYYY-MM-DD').valueof() === moment().format('YYYY-MM-DD').valueof()) {
        if (date?.format('HH').valueof() === moment().format('HH').valueof()) {
            if (date?.format('mm').valueof() === moment).format('mm').valueof()) {
                return {
                    disabledHours: () => range(0, 24).splice(0, hour),
                    disabledMinutes: () => range(0, 60).splice(0, min),
                    disabledSeconds: () => range(0, 60).splice(0, second)
                };
            }
            else {
                return {
                    disabledHours: () => range(0, 24).splice(0, hour),
                    disabledMinutes: () => range(0, 60).splice(0, min)
                };
            }
        }
        else {
            return {
                disabledHours: () => range(0, 24).splice(0, hour)
            };
        }
    }
};

<DatePicker
    showTime
    disabledDate={cur => cur && cur < moment().startof('day')}
    disabledTime={disabledTime}
>

disabledDate={cur => cur && cur < moment().startof('day')} 限制了日期选择只能选择今天或者之后的日期

disabledTime={disabledTime} 调用函数,限制可以选择的时间为当前时间之后的时间,仅限制了当天的时分秒,之后的并未限制。

可根据实际情况进行限制,本例子只是以当天和当前时间的时分秒为限制

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值