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}/>