基于antd 3.26 实现日期范围限制 随动禁止
2020-07-02 本文已影响0人
lessonSam
注意:基于3.26 和moment 实现
return (
<RangePicker
style={{ width: '100%' }}
disabledDate={this.disabledDate} // 禁止的回调函数
onCalendarChange={this.onCalendarChange} 点击日历的回调
onOpenChange={this.onRangePickerOpen} // 弹出日历的回调
ranges={{
最近7天: [moment().add(-6, 'days'), moment()],
最近一月:[moment().add(-1, 'months'), moment()]
}}
showTime
format="YYYY-MM-DD"
/>
1 处理
disabledDate = current => {
const { firstChosenTime } = this.state
// 可选值 大于当前时间 禁用
// if (current.valueOf() > moment().valueOf()) {
// return true
// }
if (!firstChosenTime) {
return false
}
if (
this.getIsLtMonths(current, firstChosenTime) ||
this.getIsGtMonths(current, firstChosenTime)
) {
return true
}
return false
}
// 注意,这里复制出来的原因是:
// 调用add或者subtract之类方法会修改state中firstChosenTime的值
// less then
getIsLtMounths = (momentA, momentB) => {
return (
momentA.valueOf() <
momentB
.clone()
.subtract(1, 'months')
.valueOf()
)
}
getIsGtMonths = (momentA, momentB) => {
return (
momentA.valueOf() >
momentB
.clone()
.add(1, 'months')
.startOf('day')
.valueOf()
)
}
onRangePickerOpen = isRangePickerOpen => {
if (isRangePickerOpen) {
this.setState({
firstChosenTime: undefined
})
}
}
onCalendarChange = chosen => {
if (chosen && chosen.length === 1) {
this.setState({
firstChosenTime: chosen[0]
})
}
}