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

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

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

1.HTML 

  <el-date-pickerv-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.mzph.cn/news/138.shtml

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

相关文章

【数据挖掘】时间序列教程【十】

5.4 通用卡尔曼滤波 上一节中描述的状态空间模型作为观测方程的更一般的公式 和状态方程 这里是一个p1 向量是一个k1 向量, 是一个pk 矩阵, 是kk 矩阵。我们可以想到的和 给定初始状态 和 &#xff0c;预测方程为&#xff08;类似于上面&#xff09; 并且更新方程是&#x…

华为Harmony应用开发初探

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体…

外包干了2个月,技术退步明显...

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

Linux进程(二)---进程的优先级和环境变量

我想在这先完成上一章的一个未说完的话题.最后一个我们讲到了僵尸进程&#xff0c;是指子进程已经结束&#xff0c;但是父进程还在运行没有来得及回收.此时这个子进程便是僵尸进程. 但是如果父进程运行完了&#xff0c;也没有回收就直接结束了&#xff0c;那这个子进程改由谁维…

用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版

我们用自定义函数setDocFmt()来实现对公文的排版。 一、获取公文参数值 要对公文进行排版&#xff0c;首先要读取公文“参数设置”区中的参数值。比如公文要求对公文标题的一般规定是&#xff1a;一般用2号小标宋体字&#xff0c;居中显示。标题与正文中间空一行。 这些是“参…

Python控制流程盘点及高级用法、神秘技巧大揭秘!

目录 一、条件语句&#xff08;If-Elif-Else&#xff09; 二、循环结构&#xff08;For和While&#xff09; 三、异常处理&#xff08;Try-Except&#xff09; 四、控制流程的高级用法&#xff01; 1. 列表解析 2. 生成器表达式 3. 装饰器 One More Thing&#xff01;&…

Microsoft 宣布今年底关闭开源软件托管平台 CodePlex

Microsoft 宣布&#xff0c;将关闭开源软件托管平台 CodePlex。Microsoft 2006 年推出这项服务&#xff0c;并决定在今年 12 月 15 日将其关闭。 Microsoft 公司副总裁 Brian Harry 在网上博客中写道&#xff0c;人们将可以下载他们的数据档案&#xff0c;Microsoft 正与面向开…

配电柜实时监测?这也太会省力了吧!

现代企业厂房的安全和效率对于业务的成功至关重要。在这个背景下&#xff0c;配电柜监控成为了一项关键的技术。通过实时监测和管理厂房内的配电柜&#xff0c;企业可以确保电力供应的稳定性&#xff0c;提高能源利用效率&#xff0c;并及时发现和解决潜在的故障和安全风险。 配…

matlab学习指南(2):安装工具箱Toolbox的方法(详细图解)

&#x1f305;*&#x1f539;** φ(゜▽゜*)♪ **&#x1f539;*&#x1f305; 欢迎来到馒头侠的博客&#xff0c;该类目主要讲数学建模的知识&#xff0c;大家一起学习&#xff0c;联系最后的横幅&#xff01; 喜欢的朋友可以关注下&#xff0c;私信下次更新不迷路&#xff0…

Uniapp 版本更新

文章目录 前言Uniapp更新确定接口是否能够使用基本代码封装更新软件区别 前言 软件发布之后更新是经常出现的需求。我们希望软件能够自动连网更新软件&#xff0c;而不是重新去手动安装一个apk安装包。不需要更新的软件只有两个&#xff0c;一个是微信小程序&#xff0c;另一个…

openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取

文章目录 openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取概述笔记伺服和配套电机型号官方伺服调试软件笔记H00H01H02H03H04H05H06H07H08H09H0AH0BH0CH0DH0FH11H12H16H17H30H31自定义组备注END openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取 概述 设备中用到了…

学习笔记——vscode界面设置界面缩放级别

使用vscode时&#xff0c;不知道按了什么快捷键&#xff0c;vscode窗口缩放了。 调整方法&#xff1a;设置 > 窗口(window) > Zoom Level

淘宝订单拉取更新历史状态~需求

&#x1f4da;目录 订单接口api需求问题解决 Map<String,TaobaoOrder> 订单接口api 可自行查询官网文档&#xff0c;点击进入 需求 通过接口中has_next 标识判断该时间断是否还有下一页数据,直到该值数据为false时,表面该时间范围内的订单数据获取完成. 拉取完成后需要对…

初阶C语言——指针

Hello&#xff0c;我们又见面了&#xff0c;时间过的好快啊&#xff0c;转眼间也已经写了这么多份博客了&#xff0c;在接下来的一年里&#xff0c;小编也会认真学习的敲代码&#xff0c;我们一起进步&#xff0c;那今天开始讲我们的指针&#xff0c;指针这一章节在C语言的学习…

【K8S系列】深入解析K8S监控

序言 做一件事并不难&#xff0c;难的是在于坚持。坚持一下也不难&#xff0c;难的是坚持到底。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记论点蓝色&#xff1a;用来标记论点 Kubernetes (k8s) 是一个容器编…

微服务实例构建成 docker 镜像实例

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…

使用WiFi测量仪进行机器人定位的粒子过滤器研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

PLSQL Developer怎样查看当前活动会话

点‘工具’-‘会话’&#xff1a; 选择‘Active sessions’: 点击某个会话&#xff0c;可以看到其对应的sql&#xff1a;

Flutter系列文章-Flutter环境搭建和Dart基础

Flutter是Google推出的一个开源的、高性能的移动应用开发框架&#xff0c;可以用一套代码库开发Android和iOS应用。Dart则是Flutter所使用的编程语言。让我们来看看如何搭建Flutter开发环境&#xff0c;并了解Dart语言的基础知识。 一、Flutter环境搭建 1. 安装Flutter SDK …

设计模式之模板模式

1. 模板模式介绍 1、模板模式即模板方法模式自定义了一个操作中的算法骨架&#xff0c;而将步骤延迟到子类中&#xff0c;使得子类可以不改变一个算法的结构&#xff0c;可以自定义该算法的某些特定步骤&#xff1b; 2、父类中提取了公共的部分代码&#xff0c;便于代码复用&am…