element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
【element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)】项目需求是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟.
有两种选择
1.使用DateTimePicker 日期时间选择器.
2.DatePicker 和 TimePicker 组合使用
这里我是用的是第二种方法,最主要的属性是picker-options
data(){ return{pickerOptions: {disabledDate: time => {return time.getTime() < Date.now() - 3600 * 1000 * 24},}, }},watch: {'formInline.inventoryDate':{deep:true,handler(newValue, oldValue) {if(newValue){let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime()+60*1000); // 一分钟之后的时间(我是因业务要求,这里可以随意调整时间)let dt = nowDate.split(" "); let st = ''; if(newValue.split(" ")[0] == dt[0]){// 是今天,选择 的时间开始为此刻的时分秒st = dt[1]; }else{// 明天及以后从0时开始st = '00:00:00'; }this.startTimeRange = st + ' - 23:59:59'; //console.log(this.startTimeRange)//例如:如果今天此刻时间为10:41:40 则选择时间范围为: 11:41:40 - 23:59:59//否则为:00:00:00- 23:59:59}},} },
思路:使用el-date-picker的picker-options属性中的disabledDate配置项,先禁用日期选择器,使其只能选择当前日期之后的日期,然后用watch监控日期选择器所选日期如果是今天就使用el-time-picker的picker-options属性中selectableRange配置项,控制可选择时间.
注意:这种逻辑虽然可以禁用秒的选择,不过在前端页面中秒的选择是没有禁用的,当你选择之前秒时,会默认显示一分钟之后的秒数(我是因业务要求,通过上述代码你可以随意调整禁用的时间段)
呈现效果:
文章图片
也把第一种方法总结一下吧
我禁用的日期是今天以前的,时间范围是22:00到02:00,直接上代码
data() {return {aa: '',pickerOptions: {// 限制时间selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'],//这里也可以绑定个变量动态限制时间// 限制日期disabledDate: this.disabledDate},} } , methods: {disabledDate(time) {return time.getTime() < Date.now() - 3600 * 1000 * 24}}
到此这篇关于element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)的文章就介绍到这了,更多相关element TimePicker禁用部分时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- React讲解 - 父组件调用子组件内容【更新中】
- 业务网关之AK中心建设
- Vue中使用axios调用后端接口的坑及解决
- Vue中用JSON实现刷新界面不影响倒计时
- 【leetcode 29】 两数相除(中等)
- 保证预言机网络的去中心化特性和可用性能
- 同态加密在联邦计算中的应用
- 详解BI系统中的任务调度
- 解决vue页面刷新vuex中state数据丢失的问题
- mybatis中数据加密与解密的实现