1.html主要代码
<DatePicker format="YYYY-MM-DD"
onChange={handleStartDateChange}
disabledDate={handleStartDisabledDate}
placeholder="开始日期"
/>
<DatePicker style={{ marginLeft: '6px' }}
format="YYYY-MM-DD"
onChange={handleEndDateChange}
disabledDate={handleEndDisabledDate}
placeholder="结束日期"
/>
2.js主要代码
// 结束时间选择器(监控记录日期变换)
handleEndDateChange = (value, dateString) => {
this.endTime = moment(dateString).startOf('day').format('YYYY-MM-DD HH:mm:ss')
};
// 开始时间选择器(监控记录日期变换)
handleStartDateChange = (value, dateString) => {
this.startTime = moment(dateString).startOf('day').format('YYYY-MM-DD HH:mm:ss')
};
// 结束时间可选范围
handleEndDisabledDate = (current) => {
if (this.startTime && this.startTime !== 'Invalid date') {
// 核心逻辑: 结束日期不能多余开始日期后60天,且不能早于开始日期
return current && current > moment().subtract(1, 'days').endOf('day') || current >
moment(this.startTime).add(60, 'day') || current < moment(this.startTime);
} else {
//今天及未来时间不可选
return current && current > moment().subtract(1, 'days').endOf('day')
}
}
// 开始时间可选范围
handleStartDisabledDate = (current) => {
if (this.endTime && this.endTime !== 'Invalid date') {
// 核心逻辑: 开始日期不能晚于结束日期,且不能早于结束日期前60天
return current < moment(this.endTime).subtract(60, 'day') || current >
moment(this.endTime);
} else {
//今天及未来时间不可选
return current && current > moment().subtract(1, 'days').endOf('day')
}
}
方法是在Mobx状态管理里面写的,如果在页面写,需要绑定this,startTime和endTime是在定义的变量名