el-date-picker 日期时间进行限制,精确到时分秒

news2024/12/23 1:56:38

需求:用户只能选择当时时间或当前时间之前的时间,且精确到时分秒

实现效果:用户只能选择当前时间的时间,如果选择是当天之前的时间,时分秒不做限制,如果选择的是当天时间,就要判断时分秒,只能选择当前时间时分秒之前的时间。 

1.HTML 

  <el-date-picker
        v-model="form.beginTime"
        type="datetime"
        :placeholder="开始时间"
        align="right"
        :picker-options="startPickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
            >
</el-date-picker>

2.JS

data() {
    return {
      startPickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 禁用超过当前时间的日期
        },
        selectableRange: "00:00:00 - 23:59:59",//这个加上之后,时分秒上面才有禁止选择变灰,如果不加,也可以禁止选择,但是不会变灰
      },
    }
  },
watch:{
   "form.beginTime": {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date();
          let min = date.getMinutes();
          date.setMinutes(min + 1); //这里加1分钟,是为了解决值改变后,系统秒数就过期限制了,无法点击“此刻”按钮, 如果监听 “系统时间”的改变,则会影响性能。
          let nowDate = moment(date).format("HH:mm:ss");
          let st = "";
          if (moment(date).format("yyyy-MM-DD") === moment(newValue).format("yyyy-MM-DD")){
            let hh1 = moment(newValue).format("HH:mm:ss")
            if(hh1 > nowDate) {
              this.form.beginTime = new Date();
            }
            st = nowDate;
          } else {
            st = "23:59:59";
          }
          this.startPickerOptions.selectableRange = "00:00:00 - " + st;
          this.startPickerOptions = this.startPickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },
},

 以上代码就能实现,对日期时间进行限制,且精确到时分秒。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Stable Diffusion 丝滑无闪烁AI动画 Temporalkit+Ebsynth+Controlnet

早期的EbSynth制作的AI视频闪烁能闪瞎人的双眼,可以通过【temporalkit+ebsynth+controlnet】让视频变得丝滑不闪烁。 文章目录 插件准备丝滑视频制作插件准备 下载安装 EbSynth官网,这里需要输入email地址。 下载压缩包解压缩到任意位置,这里我放到了ebsynth_utility下。 …

Flowable边界事件-消息边界事件

消息边界事件 消息边界事件一、定义1. 图形标记2. 设置消息 选择消息3. XML标记 二、测试用例2.1 定时边界事件xml文件2.2 消息边界事件测试用例 总结 消息边界事件 一、定义 接收到消息触发事件 1. 图形标记 2. 设置消息 选择消息 3. XML标记 定时边界事件的XML <messag…

【sgWaterfall】Vue实现图文瀑布流布局模式,图片预加载显示占位区域阴影,加载完成后向上浮动动画出现

Vue实现图文瀑布流布局模式&#xff0c;图片预加载显示占位区域阴影&#xff0c;加载完成后向上浮动动画出现 sgWaterfall.vue源码 <template><ul :class"$options.name" :style"waterfallStyle"><li v-for"(a, i) in items "…

业务变革与架构双驱动的多项目管理︱海康威视流程变革咨询顾问张燕飞

海康威视数字技术股份有限公司流程与变革管理部流程变革咨询顾问张燕飞女士受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;业务变革与架构双驱动的多项目管理。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要…

如何在MySQL中安装示例数据库sakila

就像 SQLServer 示例数据库一样,MySQL 也有示例数据库,比如sakila;Sakila 数据库最初由 MySQL AB 文档团队的前成员 Mike Hillyer 开发,旨在提供一个标准模式,可用于书籍、教程、文章、示例等中的示例,它包含示例视图、存储过程和触发器。 以下是在服务器上安装sakila数…

33个字段,我乏了!

家人们&#xff0c;谁懂啊&#xff1f;&#xff1f;最近两天&#xff0c;一直在测试数据报告&#xff0c;一个页面有30多个字段的那种&#xff0c;从基础表写sql语句&#xff0c;执行&#xff0c;与页面显示的字段值进行对比&#xff0c;一个挨着一个&#xff0c;讲真&#xff…

热更新时:app经常因为HBuilder X的更新提示HTML5+ Runtime版本不匹配的问题

直接暴力解决问题。 "app-plus" : {"compatible": {"ignoreVersion": false,//可选&#xff0c;Boolean类型&#xff0c;是否忽略版本兼容检查提示}, }APP模块等相关配置改变还是需要整包APK更新。 只有热更新改前端代码&#xff0c;推荐直接配置…

驱动 DAY10

platform驱动实现 match-devicetree.c #include <linux/init.h> #include <linux/module.h> #include <linux/platform_device.h> #include <linux/mod_devicetable.h> #include <linux/gpio.h> #include <linux/of.h> #include <linu…

electron+vue3全家桶+vite项目搭建【21】自定义无边框窗口拖拽移动

文章目录 引入实现思路实现步骤1.主进程监听窗口移动2.通信工具补充ipc调用3.渲染进程封装通用拖拽组件 测试 引入 如果你尝试过透明窗口&#xff0c;并控制透明部分事件击穿&#xff0c;就会发现使用 drag属性样式去控制窗口拖拽会导致点击事件失效&#xff0c;并且带drag属性…

有没有后端程序员想要兼职的?

有一个非常有意思的现象&#xff1a; 后端看不起前端&#xff0c;认为前端是好入门&#xff0c;含金量低&#xff0c;一下就能学会的页面侠&#xff1b; 前端看不起后端&#xff0c;认为后端是每天CRUD、调参、拿来主义的搬砖工&#xff1b; 而实际上&#xff0c;大家都是给老板…

vue生命周期四个阶段(created和mount)

1.四个阶段 1&#xff09;必经阶段 2&#xff09;非必经阶段 提示&#xff1a;主动调用 vm.$destroy() 函数销毁后&#xff0c;可用 vm.$mount("#app") 将断开的 new Vue() 和页面重新建立虚拟 DOM 树&#xff0c;重新绑定起来挂载界面。 2. 生命周期钩子函数&…

【大数据】大数据简介

大数据简介 大数据基础平台架构实际应用关键技术 Hadoop 分布式计算平台Hadoop生态系统Hadoop安装和使用 HDFS分布式文件系统NamenodeSecondary NamenodeDataNodeblock 大数据基础 平台架构 实际应用 关键技术 Hadoop 分布式计算平台 Hadoop生态系统 Hadoop安装和使用 参考htt…

单向链表基本操作

目录 初始化链表 插入 删除 遍历 销毁 清空 初始化链表 代码&#xff1a; struct LinkNode* Init_LinkList() {struct LinkNode* head (struct LinkNode*)malloc(sizeof(struct LinkNode));head->data -1;head->next NULL;// 尾部指针struct LinkNode* pRear …

概率论的学习和整理15: 超几何分布,二项分布,泊松分布是如何趋近收敛的?

目录 1 问题&#xff1a; 2 结论 3 实验1 4 实验2 5 实验3 6 实验4 5 各种规律总结 5.1 1 5.2 2 5.3 3 5.4 4 6 超几何分布&#xff0c;二项分布&#xff0c;泊松分布&#xff0c;三者用EXCEL模拟 6.1 简单的扩展到泊松分布 6.2 比较整体的动态过程&…

在qt界面上内嵌拥有独立句柄的窗口

背景 在qt程序中&#xff0c;如果数据刷新频率过高&#xff0c;容易造成窗口卡顿&#xff0c;因为qt程序是整个窗口刷新&#xff0c;在此种背景下可以在qt程序的主程序上内嵌一个拥有独立句柄的窗口&#xff0c;两个窗口刷新就互不干扰。 案例 以下例子&#xff0c;在主窗口…

【技术指南】3D转换工具HOOPS Exchange的功能特征和典型使用场景全解析(一)

一、什么是 HOOPS Exchange&#xff1f; HOOPS Exchange 是一组软件库&#xff0c;可以帮助开发人员在开发应用程序时读取和写入主流的 2D 和 3D 格式。HOOPS Exchange 支持 在主流的3D 文件格式中读取 CAD 数据&#xff0c;并支持将 3D 数据转换为 PRC 数据格式&#xff0c;…

2.2 顺序表与链表特性对比

1. 插入删除操作对比 1. 顺序表插入删除元素 插入策略: 在某个位置插入元素时, 把从该位置开始的所有元素都往后挪一个位置, 规定顺序表最后一个元素后面的位置也是一个可插入位置. 后面的元素先往后挪动位置. 删除策略: 在某位置删除元素, 把从该位置之后的所有元素都往前…

【技术篇】• 饮用水除硝酸盐的技术解析

​​​​​​​ 近年来由于农业活动及排污物的影响&#xff0c;部分地表水源水中硝酸盐含量呈现明显的增加趋势&#xff0c;硝酸盐污染成为地下水和饮用水领域关注的热点问题之一。 硝酸盐是有氧环境中稳定的含氮化合物形式&#xff0c;也是含氮有机物通过无机化分解的产物&am…

搭建archetype骨架工程

搭建archetype骨架工程 一、archetype概念1、archetype简介2、archetype组成结构3、archetype生命周期4、archetype使用 二、构建我们自定义的骨架工程1、创建一个自定义的项目2、修改pom的build插件3、生成archetype资源文件4、将生成的资源文件制作成archetype jar包5、生成a…

Java中不同变量声明类型

今天在学习分层解耦-三层架构的过程中&#xff0c;具体文章参照&#xff1a;写文章-CSDN创作中心 在Servie层创建Dao对象时&#xff0c;以及在Controller层创建Service对象时&#xff0c;发现与我之前了解的声明变量的方法不一样。具体关键代码如下&#xff1a; 其中EmpServic…