antd组件限定时间选择器日期范围

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 (
{ marginTop: '3px' }}>{getFieldDecorator('startTime')()}{ display: 'inline-block', textAlign: 'center' }}>-{ marginTop: '3px' }}>{getFieldDecorator('endTime')()}
)}
}export default DataTest;

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！