zoukankan      html  css  js  c++  java
  • 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语言编程
    Java语言编程
    《自己动手写云盘》 – 确立需求
    树上差分
    线性基
    BM(Berlekamp-Massey)算法
    FFT/FWT
  • 原文地址:https://www.cnblogs.com/minjh/p/14602487.html
Copyright © 2011-2022 走看看