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>
          )
    }
  • 相关阅读:
    Python通过多线程实现 `异步`
    Linux(六) 处理用户输入
    Linux(五) 更多结构化命令
    Linux(四) 使用结构化命令
    Linux(三) 科学计算
    Linux(二) Shell脚本
    python 登陆接口
    学习的小建议
    干货
    ThinkPhp5 自定义异常处理类
  • 原文地址:https://www.cnblogs.com/minjh/p/14602487.html
Copyright © 2011-2022 走看看