網站首頁 編程語言 正文
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)
}
}
}
原文鏈接:https://blog.csdn.net/xinxin_csdn/article/details/121343484
- 上一篇:二叉樹的遞歸和非遞歸遍歷
- 下一篇:react設置多個classname
相關推薦
- 2022-09-01 Nginx?部署的虛擬主機使用?Let's?Encrypt?加密?https的方法_nginx
- 2023-01-21 VmWare安裝Centos后配置Net網絡SSH鏈接問題及解決_VMware
- 2022-07-10 TypeError: Cannot read property ‘forceUpdate‘ of u
- 2023-07-18 List集合循環刪除特殊元素之六種方法(實踐)
- 2022-04-28 C#網絡編程之Socket編程_C#教程
- 2023-05-06 react中定義變量并使用方式_React
- 2022-04-11 Python中性能分析利器pyinstrument詳細講解_python
- 2024-03-15 Redis中RDB和AOF
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支