網(wǎng)站首頁 編程語言 正文
antd的timePicker.RangePicker設(shè)置結(jié)束時(shí)間不可早于開始時(shí)間
作者:xinxin_csdn 更新時(shí)間: 2022-05-10 編程語言antd當(dāng) 結(jié)束時(shí)間小于結(jié)束時(shí)間時(shí),會將倆個(gè)時(shí)間置換,不能滿足需求啊
api中disabledTime不知為啥不觸發(fā)。。。待解決
利用onCalendarChange方法和disabledHours、disabledMinutes去實(shí)現(xiàn)效果
代碼如下
import { TimePicker } from 'antd'
const [disabledHourValue, setDisabeledHourValue] = useState([]) // 不能選擇的小時(shí)
const [hourNum, setHourNum] = useState(0)?// 已選擇的時(shí)間的 小時(shí)數(shù)
const [minuteNum, setMinuteNum] = useState(0) // 已選擇的時(shí)間的 分鐘數(shù)
const [selectType, setSelectType] = useState() // 已選擇的時(shí)間的類型
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)
}
}
}
原文鏈接:https://blog.csdn.net/xinxin_csdn/article/details/121343484
相關(guān)推薦
- 2021-12-05 判斷網(wǎng)頁時(shí)瀏覽器打開還是釘釘打開
- 2022-04-19 Python的閉包和裝飾器你真的了解嗎_python
- 2022-10-03 Objective-C之Category實(shí)現(xiàn)分類示例詳解_IOS
- 2022-09-20 Python處理時(shí)間戳和時(shí)間計(jì)算等的腳本分享_python
- 2023-02-10 Docker?跨主機(jī)容器間相互訪問的實(shí)現(xiàn)_docker
- 2022-04-22 VSCode中g(shù)it上傳遇到 “在簽出前,請清理存儲庫工作樹。”問題解決
- 2022-11-17 python標(biāo)準(zhǔn)庫random模塊處理隨機(jī)數(shù)_python
- 2023-03-03 C++?高精度乘法運(yùn)算的實(shí)現(xiàn)_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支