Date TimePicker 时间选择器精确限制到时分秒,此刻按钮点击失效处理

今天在开发的时候遇到一个需求,日期时间选择器组件不能选择已经过去的年月日时分秒。用户只能选择当前时间的时间,如果年月日选择是当天之前的时间,时分秒不做限制,如果年月日选择的是当天时间,就要判断时分秒,只能选择当前时间时分秒之前的时间。

此时就会出现第一次点击此刻按钮之后就无法再继续点击了

html 复制代码
<el-date-picker
   v-model="formJson.formValue.ReceivingTime"
   type="datetime"
   placeholder="请选择收款时间"
   value-format="yyyy-MM-dd HH:mm:ss"
   :picker-options="pickerOptions"
   @focus="focusReceivingTime"
 ></el-date-picker>
javascript 复制代码
pickerOptions: {
  disabledDate(time) {
    return time.getTime() > Date.now(); // 禁用超过当前时间的日期
  },
  selectableRange: '00:00:00 - 23:59:59' //这个加上之后,时分秒上面才有禁止选择变灰,如果不加,也可以禁止选择,但是不会变灰
}

// 监听刚开始的数据变化处理
watch: {
  'formJson.formValue.ReceivingTime': {
    handler(newValue) {
      if (newValue) {
        let date = new Date();
        // let min = date.getMinutes();
        // date.setMinutes(min + 1);
        let nowDate = dayjs(date).format('HH:mm:ss');
        let st = '';
        if (dayjs(date).format('yyyy-MM-DD') === dayjs(newValue).format('yyyy-MM-DD')) {
          let hh1 = dayjs(newValue).format('HH:mm:ss');
          if (hh1 > nowDate) {
            this.formJson.formValue.ReceivingTime = new Date();
          }
          st = nowDate;
        } else {
          st = '23:59:59';
        }
        this.pickerOptions.selectableRange = '00:00:00 - ' + st;
      }
    },
    deep: true,
    immediate: true
  }
}


methods: {
// 获取焦点事件来处理选择时间范围
 focusReceivingTime() {
   if (!this.formJson.formValue.ReceivingTime) return;
   let newValue = JSON.parse(JSON.stringify(this.formJson.formValue.ReceivingTime));
   let date = new Date();
   let min = date.getSeconds();
   date.setSeconds(min + 20);
   let nowDate = dayjs(date).format('HH:mm:ss');
   let st = '';
   if (dayjs(date).format('yyyy-MM-DD') === dayjs(newValue).format('yyyy-MM-DD')) {
     let hh1 = dayjs(newValue).format('HH:mm:ss');
     if (hh1 > nowDate) {
       this.formJson.formValue.ReceivingTime = new Date();
     }
     st = nowDate;
   } else {
     st = '23:59:59';
   }
   this.pickerOptions.selectableRange = '00:00:00 - ' + st;
 }
}

如果这篇文章对你有所帮助,欢迎点赞、分享和留言,让更多的人受益。感谢你的细心阅读,如果你发现了任何错误或需要补充的地方,请随时告诉我,我会尽快处理。

相关推荐
用户516816614584117 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦17 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He18 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化