• antd DatePicker日期控件设置禁用时间范围


    我们知道antd官网不可选时间使用的是 RangePicker 如下图:


    但有时候我们需要使用 DatePicker 单独设置起始时间,如图:

    废话不多说,直接上代码:(这里用的是react+ts+antd)

    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    function DateInfo() {
        const [startTime, setStartTime] = useState<moment>(null);
        const [endTime, setEndTime] = useState<moment>(null);
    
        // 禁用开始时间(开始时间不能大于当前时间)
        function disabledStartDate(startValue) {
            if (!startValue || !endTime) {
                return startValue <= moment().startOf('days');
            }
            return startValue <= moment().startOf('days') || startValue.valueOf() > endTime.valueOf();
        }
    
        // 禁用结束时间
        const disabledEndDate = (endValue) => {
            if (!endValue || !startTime) {
                return false;
            }
            return endValue.valueOf() <= startTime.valueOf();
        };
        return (
              <Row>
                <Col span={9}>
                    <Form.Item
                        label="起始时间"
                        name="effectTime"
                        rules={[{ required: true, message: '请选择起始时间' }]}
                    >
                        <DatePicker
                            format={dateFormat}
                            disabledDate={disabledStartDate}
                            onChange={(value) => setStartTime(value)}
                            showTime
                        />
                    </Form.Item>
                </Col>
                <Col span={9}>
                    <Form.Item
                        label="失效时间"
                        name="expireTime"
                        rules={[{ required: true, message: '请选择失效时间' }]}
                    >
                        <DatePicker
                            format={dateFormat}
                            disabled={!startTime}
                            disabledDate={disabledEndDate}
                            onChange={(value) => setEndTime(value)}
                            showTime
                        />
                    </Form.Item>
                </Col>
            </Row>
          )
    }
  • 相关阅读:
    JAVA传值与传址
    JAVA中的栈和堆
    for语句输出图形
    Linux下ps命令详解(转载)
    BMC介绍
    JVM 优化、内存泄露排查、gc.log 分析方法等(转载)
    动态从zookeeper读取kafka信息
    centos 查看文件系统类型
    TCPdump抓包命令详解
    Linux Tab键自动补齐
  • 原文地址:https://www.cnblogs.com/minjh/p/14602487.html
Copyright © 2020-2023  润新知