1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > React中antd日期选择框 指定区间禁用时间

React中antd日期选择框 指定区间禁用时间

时间:2023-01-21 15:54:41

相关推荐

React中antd日期选择框 指定区间禁用时间

antd datepicker禁止选中时间范围

获取当前日期加14天的时间今天为时间点,单范围禁止选中区间范围可选(当前时间+14天可选),前后时间禁止选中

描述一下应用场景:datepicker可选范围:当前时间+14天,其他时间禁用🚫

获取当前日期加14天的时间

getNewData = (days) => {// 获取当前时间的时间戳let timeTemp = new Date().getTime();// 当前时间加14天的时间戳var reviewDay = timeTemp + (days * 24 * 60 * 60 * 1000);var rDate = new Date(reviewDay);var year = rDate.getFullYear();var month = rDate.getMonth() + 1;if (month < 10) month = "0" + month;var date = rDate.getDate();if (date < 10) date = "0" + date;var currentDate = new Date();var currentYear = currentDate.getFullYear();var currentMonth = currentDate.getMonth() + 1;var currentDay = currentDate.getDate();this.setState({dayTime: year + "-" + month + "-" + date, // 14天时间currentTime: currentYear + "-" + currentMonth + "-" + currentDay,moreTime: year + "-" + month + "-" + (parseInt(date) + 1),})return (year + "-" + month + "-" + date);}

今天为时间点,单范围禁止选中

disabledDate= current => {

return current && current > moment().endOf(‘day’)//今天以后可选

return current && current< moment().endOf(‘day’)//今天以前可选

}

区间范围可选(当前时间+14天可选),前后时间禁止选中

current 选择可以点击选择的时间

startTime 开始时间

endTime 结束时间

disabledDate = (current: any) => {let { startTime, endTime } = this.stateif (!current || !startTime || !endTime) {return false;} else {return current < startTime || current > endTime;}}// 插件属性<DatePickerplaceholder={"请选择时间}style={{ width: '100%' }}format="YYYY-MM-DD"disabledDate={this.disabledDate}/>

如果时间格式是 -5-9,需要用moment转一下时间

currentTime 开始时间

moreTime 结束时间

disabledDate = (current) => {// 可选择的时间在范围内return current && current > moment(new Date(this.state.moreTime)) || current && current < moment(new Date(this.state.currentTime));}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。