-
默认picker-options 是配置的对象,如果代码中只存在一个开始时间或者一个结束时间,可以直接设置成对象进行配置
-
我这里的应用场景是在表格中存在多个时间的配置项
- 使用到了dayjs作为时间判断,也可以自行根据js来实现判断
- 需要将picker-options 做成函数,应为表格每一行中都存在一个开始和结束时间,需要把每一行的开始和结束时间传递过去进行判断
- 所以可以将picker-options当作函数,参数传递为对应需要进行处理开始和结束时间,返回值 picker-options 配置的参数
- selectableRAnge 可以支持到时分秒的判断,例如结束时间的配置,需要拿到开始时间的时分秒,设置为自己时间可选范围的区间
-
以下是代码部分
*javascriptdata() { return { // 结束时间的禁用 endPickerOptions: function (item) { return { disabledDate: function (time) { if(!item.startTime) return false // 比较是否为同一天,如果组件中需要选择时分秒,则会出现开始时间和结束时间同一天无法选择的问题,需要加上判断,不需要时分秒可以去掉这行,开始和结束判断一样 if(item.startTime && item.endTime && dayjs(item.startTime).format('YYYY-MM-DD') === dayjs(item.endTime).format('YYYY-MM-DD')) { return false } return time.getTime() < item.startTime }, selectableRange: (() => { if(!item.startTime) return [`00:00:00 - 23:59:59`] if(item.startTime) { let date = new Date(item.startTime); let hour = date.getHours(); let minute = date.getMinutes(); let second = date.getSeconds(); // 大于一天的话,时分秒可以随意选择 if(item.endTime - item.startTime > 3600 * 24) return [`00:00:00 - 23:59:59`] return [`${hour}:${minute}:${second} - 23:59:59`] } })() } }, // 开始时间的禁用 startPickerOptions(item) { return { disabledDate: function (time) { if(!item.endTime) return false if(item.startTime && item.endTime && dayjs(item.startTime).format('YYYY-MM-DD') === dayjs(item.endTime).format('YYYY-MM-DD')) { return false } return time.getTime() > item.endTime }, selectableRange: (() => { if(!item.endTime) return [`00:00:00 - 23:59:59`] if(item.endTime) { let date = new Date(item.endTime); let hour = date.getHours(); let minute = date.getMinutes(); let second = date.getSeconds(); // 大于一天的话,时分秒可以随意选择 if(item.endTime - item.startTime > 3600 * 24) return [`00:00:00 - 23:59:59`] return [`00:00:00 - ${hour}:${minute}:${second}`] } })() } }, } },
el-date-picker picker-options属性中disabledDate设置时间的禁用和启用,并且支持到时分秒的禁用和启用
alexbai!2024-11-13 15:19
相关推荐
Larcher1 天前
React Router 不只是页面跳转:从 SPA 路由到权限守卫的完整实践Larcher1 天前
大模型为什么每次回答都不一样?一文搞懂 Temperature、Top K 与 Top Peric-sjq1 天前
10 分钟实战:用 0.6B 本地模型生成中文网页(WanlyFrontend + 编译器全流程)To_OC1 天前
LC 438 找到所有字母异位词:暴力超时后,我靠滑动窗口一招搞定90后的晨仔1 天前
Mac 开发 uni-app 终极方案:让安卓模拟器彻底脱离 Android Studio 独立运行kyriewen1 天前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了一壶浊酒..1 天前
Scrape Webpack练习默_笙1 天前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构渣波1 天前
拒绝 Redux 样板代码:Zustand 核心原理与实战进阶指南(基础、异步与切片模式)C++、Java和Python的菜鸟1 天前
第12章 前端Web进阶(Vue工程化+ElementPlus)