博客

react的antd组件时间选择器限定日期范围为指定范围

react项目中碰到一个需求，要求antd的日期选择器组件可选择范围为：只能选择开始时间的后60天

即开始时间在结束日期前60天，结束日期在开始日期后60天，以下是截图和核心代码：主要利用日期组件的disabledDate属性

开始日期相同逻辑：不能早于结束日期前60天，不能晚于结束日期；不再截图

下面是react代码：

import moment from 'moment';
import {
  Form,
  Row,
  Col,
  DatePicker,
} from 'antd';
class DataTest extends Component {
  constructor(props) {
     super(props);
     this.state = {
        startTime: '', // 开始时间
        endTime: '', // 结束时间
     }
  }
  // 开始时间选择器(监控记录日期变换)
  handleStartDateChange = (value, dateString) => {
    this.setState({
      startTime: dateString,
    });
  };

  // 结束时间选择器(监控记录日期变换)
  handleEndDateChange = (value, dateString) => {
    this.setState({
      endTime: dateString,
    });
  };

  // 结束时间可选范围
  handleEndDisabledDate = (current) => {
    const { startTime } = this.state;
    if (startTime !== '') {
      // 核心逻辑: 结束日期不能多余开始日期后60天，且不能早于开始日期
      return current > moment(startTime).add(60, 'day') || current < moment(startTime);
    } else {
      return null;
    }
  }

  // 开始时间可选范围
  handleStartDisabledDate = (current) => {
    const { endTime } = this.state;
    if (endTime !== '') {
      // 核心逻辑: 开始日期不能晚于结束日期，且不能早于结束日期前60天
      return current < moment(endTime).subtract(60, 'day') || current > moment(endTime);
    } else {
      return null;
    }
  }

  render() {
    return (
      <Form layout="inline">
         <Row>
            <Col span={11}>
               <Form.Item label="时段">
                  <Form.Item style={{ marginTop: '3px' }}>
                    {getFieldDecorator('startTime')(
                      <DatePicker
                        onChange={this.handleStartDateChange.bind(this)}
                        disabledDate={this.handleStartDisabledDate.bind(this)}
                        placeholder="开始日期"
                      />)
                    }
                  </Form.Item>
                  <span style={{ display: 'inline-block', textAlign: 'center' }}>-</span>
                  <Form.Item style={{ marginTop: '3px' }}>
                    {getFieldDecorator('endTime')(
                      <DatePicker
                        onChange={this.handleEndDateChange.bind(this)}
                        disabledDate={this.handleEndDisabledDate.bind(this)}
                        placeholder="结束日期"
                      />)
                    }
                  </Form.Item>
                </Form.Item>
              </Col>
            </Row>
          </Form>
    )
  }
}
 
export default DataTest;

小伙伴们感觉有帮助的话希望点个赞哟，如果有问题或疑问欢迎大家评论区留言，看到后第一时间回复。