700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > antd的timePicker.RangePicker设置结束时间不可早于开始时间

antd的timePicker.RangePicker设置结束时间不可早于开始时间

时间:2023-03-29 05:01:26

相关推荐

antd的timePicker.RangePicker设置结束时间不可早于开始时间

antd当 结束时间小于结束时间时,会将俩个时间置换,不能满足需求啊

api中disabledTime不知为啥不触发。。。待解决

利用onCalendarChange方法和disabledHours、disabledMinutes去实现效果

代码如下

import { TimePicker } from 'antd'const [disabledHourValue, setDisabeledHourValue] = useState([]) // 不能选择的小时const [hourNum, setHourNum] = useState(0)// 已选择的时间的 小时数const [minuteNum, setMinuteNum] = useState(0) // 已选择的时间的 分钟数const [selectType, setSelectType] = useState() // 已选择的时间的类型const disabledHoursFun = () => {return disabledHourValue}const disabledMinutesFun = selectedHour => {let disabledValue = []if (selectType === 'start') {if (selectedHour === hourNum) {for (let i = 0; i < 60; i++) {if (i > minuteNum) {disabledValue.push(i)}}}} else if (selectType === 'end') {if (selectedHour === hourNum) {for (let i = 0; i < 60; i++) {if (i < minuteNum) {disabledValue.push(i)}}}}return disabledValue}const dealTimeData = (type, time) => {let timeArr = time.split(':')let hour = Number(timeArr[0])let minute = Number(timeArr[1])setHourNum(hour)setMinuteNum(minute)setSelectType(type)let disabledHourArr = []if (type === 'start') {for (let i = 0; i < 24; i++) {if (i > hour) {disabledHourArr.push(i)}}} else if (type === 'end') {for (let i = 0; i < 24; i++) {if (i < hour) {disabledHourArr.push(i)}}}return disabledHourArr}const changeRangeTime = (dates, dateStrings, info) => {if (dateStrings[0] === '' && dateStrings[1] === '') {setDisabeledHourValue([])return}let startTime = dateStrings[0]let endTime = dateStrings[1]if (info.range === 'start') {if (startTime !== '') {let data = dealTimeData('end', startTime)setDisabeledHourValue(data)}} else if (info.range === 'end') {if (endTime !== '') {let data = dealTimeData('start', endTime)setDisabeledHourValue(data)}}}<TimePicker.RangePickerinputReadOnlyformat="HH:mm"disabledHours={disabledHoursFun}disabledMinutes={disabledMinutesFun}onCalendarChange={changeRangeTime}/>

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