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

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

此时就会出现第一次点击此刻按钮之后就无法再继续点击了
在这里插入图片描述

<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>
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;
 }
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/787050.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LORAHUB: EFFICIENT CROSS-TASK GENERALIZATION VIA DYNAMIC LORA COMPOSITION

文章汇总 动机 效果如上&#xff1a;希望将多个任务训练得到的LoRA组合起来&#xff0c;效果比单独一个任务得到的LoRA效果更好。 愿景&#xff1a;那未来我们每个人都贡献出自己训练出来的LoRA&#xff0c;之后通过LoRAHub简单组合起来&#xff0c;就可以得到适用于多任务且功…

【C++】开源:坐标转换和大地测量GeographicLib库配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍坐标转换和大地测量GeographicLib库配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关…

【微信小程序开发实战项目】——个人中心页面的制作

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

App Cleaner Uninstaller 8.3.0激活版 最佳卸载程序和清理助手

App Cleaner & Uninstaller 完全安全地删除 Mac 上的程序&#xff0c;删除应用程序的残留物&#xff0c;管理扩展程序和启动程序。 App Cleaner & Uninstaller 8.3.0激活版下载 卸载应用程序和所有不需要的垃圾文件 当您将应用程序拖放到废纸篓时&#xff0c;请检查您…

VS2019_新建窗体应用文件SOP

文章目录 1. 打开VS2. 创建新项目3. 选择Windows窗体应用4. 起名&#xff0c;选位置&#xff0c;框架版本选择4.5及之后&#xff0c;这里选的4.85. 新建完成 1. 打开VS 2. 创建新项目 3. 选择Windows窗体应用 注意要选.NET的 4. 起名&#xff0c;选位置&#xff0c;框架版本…

分布式IO模块软件配置

组态接口模块 1、打开网络视图 2、拖拽出ET200SP 3、双击ET200SP的图片&#xff0c;进入从站配置 总线适配器的组态更换 关于IO地址分配&#xff0c;需要建立好子网通信后&#xff0c;在主机上配置。 可以看到IP 和设备名 设备与控制器的Profinet连接 先找到设备名称再找…

Python股票计算小程序(字符串格式化练习)

要求&#xff1a;打印的第一行使用f控制&#xff0c;第二行打印使用占位符&#xff0c;股价输出保留两位小数。 # 股价计算小程序 name"周氏集团" stock_price19.99 stock_code "9283" stock_price_daily_growth_factor1.2 growth_days7print(f"公司…

tableau基本表的使用 - 6

基本表的使用 1. 基本表1.1 基本表的使用 2. 凸显表的使用2.1 使用一2.2 使用二2.3 二值凸显表 1. 基本表 1.1 基本表的使用 获取行 文本标签 2. 凸显表的使用 2.1 使用一 点击智能显示&#xff0c;点击凸显表 2.2 使用二 标记&#xff1a;方块记录数&#xff1a;颜色…

【深度学习基础】环境搭建 Linux报错bash: conda: command not found...

目录 一、 问题描述二、 解决方法1. 在.bashrc文件中添加环境变量2. 卸载重装anconda 三、总结 一、 问题描述 在linux环境下安装anaconda时候报错&#xff1a;bash: conda: command not found… 二、 解决方法 1. 在.bashrc文件中添加环境变量 参考链接&#xff1a;【解决】…

Temu是什么?Temu自养号测评有什么优势?

一、 Temu是什么&#xff1f;Temu是拼多多于海外线的跨境电商平台&#xff0c;“Temu”这个名字的含义也和拼多多的意思相近。Temu跨境电商自上线以来&#xff0c;下载量不断攀升&#xff0c;发展势头一片大好&#xff0c;击穿地板价的商品在欧美市场掀起了一阵狂潮&#xff0c…

SpringAOP的坑

AOP中几种常见的通知类型及其基本作用&#xff1a; Before&#xff1a;前置通知&#xff0c;在目标方法执行之前执行。After&#xff1a;后置通知&#xff0c;无论方法执行结果如何&#xff08;包括异常&#xff09;&#xff0c;都会在目标方法执行之后执行。AfterReturning&a…

自动驾驶算法———车道检测(一)

“ 在本章中&#xff0c;我将指导您构建一个简单但有效的车道检测管道&#xff0c;并将其应用于Carla 模拟器中捕获的图像。管道将图像作为输入&#xff0c;并产生车道边界的数学模型作为输出。图像由行车记录仪&#xff08;固定在车辆挡风玻璃后面的摄像头&#xff09;捕获。…

原生APP开发的优势

原生APP开发是指使用特定的编程语言和开发工具&#xff0c;针对特定的操作系统平台进行开发的应用程序。相比于混合开发和Web开发&#xff0c;原生APP开发具有以下优势。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 性能更优 原…

单一设备上的 2 级自动驾驶:深入探究 Openpilot 的奥秘

Level 2 Autonomous Driving on a Single Device: Diving into the Devils of Openpilot 单一设备上的 2 级自动驾驶&#xff1a;深入探究 Openpilot 的奥秘 Abstract Equipped with a wide span of sensors, predominant autonomous driving solutions are becoming more m…

文件上传漏洞:upload-labs靶场安装和实践

一、upload-labs靶场安装 安装&#xff1a;Windows下的Upload-labs环境搭建(Upload文件夹不存在报错&#xff09;_upload-labs文件夹不存在-CSDN博客 当安装好phpstudy之后&#xff0c;在网址栏输入&#xff1a;localhost或127.0.0.1&#xff0c;如果没问题&#xff0c;就将下…

重塑智慧生活想象 Yeelight易来举行2024年战略及新品发布会圆满成功

7月9日&#xff0c;智能照明品牌Yeelight易来在广州举行“光为境和无界”——2024年Yeelight易来战略&新品发布会&#xff0c;此次发布会不仅展示了易来在新的一年中取得的显著业绩增长&#xff0c;还发布了多款引领行业潮流的智能新品。同时&#xff0c;发布会还邀请了权威…

10、Python之写出更加Pythonic的代码:unpacking拆包机制

引言 有些小伙伴有其他编程语言的学习、使用的经验&#xff0c;然后迁移到Python。一般会比完全的新手小白&#xff0c;更快速地把Python用起来。这是他们的优势&#xff0c;但也是他们的劣势。 之所以这么说&#xff0c;是因为从其他编程语言带过来的&#xff0c;除了相通的编…

Gamma生成ppt替代软件推荐!这3款AI工具不容错过!

在各类信息层出不穷的当下&#xff0c;让信息以最有效的方式传递&#xff0c;已成为我们面临的一大挑战。而PPT作为一种广泛使用的信息展示工具&#xff0c;其设计和制作更是影响信息传递效果的关键。 想要制作出既吸引人又具有专业感的PPT&#xff0c;却发现这并非易事&#…

一站式短视频矩阵开发,高效托管!

短视频矩阵系统源码SaaS解决方案提供全面的开发服务&#xff0c;包括可视化视频编辑、矩阵式内容分发托管以及集成的多功能开发支持。 短视频矩阵&#xff1a;引爆您的数字营销革命 短视频矩阵系统是一套多功能集成解决方案&#xff0c;专为提升在短视频平台上的内容创作、管理…

职升网:考取中专文凭的途径主要有三种!

考取中专文凭的途径主要有三种&#xff1a;成人高考、网络教育和自学考试。以下是针对每种途径的详细解释和说明&#xff1a; 成人高考 适合人群&#xff1a;适合已经工作的成年人&#xff0c;特别是希望在工作之余提升学历的人群。 报考层次&#xff1a;可以选择高起专或高…