设置指定时间之前的时间不可选

news2024/9/20 10:51:56

1、el-date-picker设置今天之前的日期不可选

<el-date-picker style="width: 100%" type="date" v-model="form.resetDate" align="right" :value-format="'yyyy-MM-dd'" placeholder="选择调整日期"
                :disabled="this.disabled "
                :picker-options="{
                  disabledDate: (time) =>
                    time.getTime() <
                    new Date(new Date().setHours(0, 0, 0, 0))
                }">
              </el-date-picker>

效果图:

2、el-time-picker设置指定时间之前的时间不可选

<el-col :span="12">
            <el-form-item label="开始时间" prop="enterTime">
              <el-time-picker v-model="form.enterTime" :disabled="this.disabled" :value-format="'HH:mm'" format="HH:mm" style="width: 100%" placeholder="请选择开始时间"
              :picker-options="{selectableRange:`00:00:00-${form.stopTime ? form.stopTime + ':00' : '23:59:59'}`}">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="stopTime">
              <el-time-picker v-model="form.stopTime" :disabled="this.disabled" :value-format="'HH:mm'" format="HH:mm" style="width: 100%" placeholder="请选择结束时间"
              :picker-options="{selectableRange:`${form.enterTime ? form.enterTime + ':00' : '00:00:00'}-23:59:59`}">
              </el-time-picker>
            </el-form-item>
          </el-col>

效果图:

 3、设置YYYY-MM-dd HH:mm:ss格式指定时间之前不可选

<el-col :span="12">
            <el-form-item label="停机时间" prop="enterTime">
              <el-date-picker v-model="form.enterTime" type="datetime" :disabled="this.disabled" placeholder="请选择进车时间" align="right" :value-format="'yyyy-MM-dd HH:mm'"
                style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="stopTime">
              <el-date-picker v-model="form.stopTime" type="datetime" :disabled="this.disabled" placeholder="请选择结束时间" align="right" :value-format="'yyyy-MM-dd HH:mm'"
                style="width: 100%" :picker-options="pickerOptions" @change="pickerOptionsEnd(form.enterTime,form.stopTime)">
              </el-date-picker>
            </el-form-item>
          </el-col>
// 结束时间不能小于开始时间
        pickerOptionsEnd(start,end){
          console.log(start)
          console.log(end)
          if(Date.parse(end )<= Date.parse(start) ) {
            this.form.stopTime = ''
            this.$modal.msgError("结束时间不能小于停机时间");
          }
        },

效果图:

 4、element 日期时间组件,限制日期时间选择范围,不能选择早于当前的时间

vue代码

<el-col :span="12">
            <el-form-item label="开始时间" prop="enterTime">
              <el-date-picker v-model="form.enterTime" type="datetime" :disabled="this.disabled" placeholder="请选择开始时间" align="right" :value-format="'yyyy-MM-dd HH:mm:ss'"
                style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="stopTime">
              <el-date-picker v-model="form.stopTime" type="datetime" :disabled="this.disabled" placeholder="请选择结束时间" align="right" :value-format="'yyyy-MM-dd HH:mm:ss'"
                style="width: 100%" :picker-options="pickerEndOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>

js代码 

data() {
      return {
// 表单参数
        form: {
          stopTime:"",
        },
// 日期限制
        pickerEndOptions: {
          disabledDate: (time) => {
            if (this.form.enterTime) {
              const st = this.form.enterTime.split(' ')[1];
              let dateTime = new Date(this.form.enterTime);
              let startDateTime = dateTime.setDate(dateTime.getDate() - (st=='00:00:00'? 0: 1));
              return (
                time.getTime() < new Date(startDateTime).getTime()
              );
            }
          },
          // 限制时间
          selectableRange: []
          
        },
}
}

监听 

watch: {
      'form.stopTime':{
        handler(newValue, oldValue) {
          if(this.form.enterTime.split(" ")[0] === newValue.split(" ")[0]){
            const st = this.form.enterTime.split(' ')[1] + ":00";
            console.log(st)
            this.pickerEndOptions.selectableRange = [`${st} - 23:59:59`];
          }else{
            this.pickerEndOptions.selectableRange = [`00:00:00 - 23:59:59`];
          }
        }
      }
    },

效果图

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

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

相关文章

1.索引的本质

索引是帮组MYSQL高效获取数据的排好序的数据结构 二叉树 二叉树是树节点的度不大于2的有序树。它是一种最简单最重要的树。 二叉树的左节点始终小于父节点。二叉树的有节点始终大于等于父节点 对于单边递增的数据&#xff0c;二叉树会变成链表的形式。这个时候查询不会减少次数…

Vatee万腾外汇市场新力量:vatee科技决策力

在当今数字化时代&#xff0c;Vatee万腾崭露头角&#xff0c;以其强大的科技决策力进军外汇市场&#xff0c;成为该领域的新力量。这一新动向将不仅塑造外汇市场的未来&#xff0c;也展现Vatee科技决策力在金融领域的引领作用。 Vatee万腾带着先进的科技决策力进入外汇市场&…

ChatGPT 从零完全上手实操指南!

那么&#xff0c;在正式开始前&#xff0c;我这里有必要说明一下&#xff1a; 关于 GPT 的基本面介绍&#xff0c;以及怎么注册&#xff0c;这些搜索引擎一搜一大把的东西&#xff0c;我们这里不浪费口舌。 PS&#xff1a;为了照顾一些无特殊环境的同学&#xff0c;文中也会提供…

大批量合并识别成一个表或文档的方法

金鸣表格文字识别系统功能强大&#xff0c;其中可以将上百张图片或上百页PDF中的表格文字合并识别成一个表格或文档的功能尤其受到广大用户的欢迎&#xff0c;那应该怎么操作呢&#xff1f; 一、打开金鸣表格文字识别软件&#xff0c;点击左上角的“表格识别”&#xff0c;选择…

(亲测有效)VMware Windows虚拟机扩容

场景&#xff1a; VMware安装了一个windows系统&#xff0c;现在windows系统剩余空间不足&#xff0c;需要扩容。 解决步骤&#xff1a; 关闭虚拟机&#xff0c;状态如下&#xff1a; 2、点击编辑虚拟机设置-》扩展 3、输入最大磁盘大小-》点击扩展 4、等待成功后&#xff0c…

Django 路由配置(二)

一、路由 就是根据用户请求的URL链接来判断对应的出来程序&#xff0c;并返回处理结果&#xff0c;也是就是URL和django的视图建立映射关系. 二、Django请求页面的步骤 1、首先Django确定要使用的根URLconf模块&#xff0c;通过ROOT_URLCONF来设置&#xff0c;在settings.py配置…

spring-boot-maven-plugin插件 —— 打包时减小jar包的大小方法

Maven 在打包时会将所依赖的 jar 包全部打包进去&#xff0c;包含了所有的依赖和资源文件&#xff0c;就会导致打出来的包比较大。如果再上传服务器&#xff0c;那么耗时特别长。 由于依赖包变化小&#xff0c;占用空间大&#xff0c;而且大部分情况是添加一次后&#xff0c;就…

MPN在QM中的使用

此文章为机器翻译SAP BLOG 文章&#xff0c;原文地址&#xff1a;Manufacturer Part Profile in QM | SAP Blogs 目的&#xff1a;–材料管理 (MM) 组件支持从不同供应商采购制造商特定的零件或材料。如果您实施制造商零件编号 (MPN) 处理功能&#xff0c;您还可以在质量管理 …

DV,OV通配符的区别

通配符证书是经常提及的一种SSL证书类型&#xff0c;也被称为泛域名证书。所有的通配符证书都具有保护主域名及其下一级所有子域名的功能。按照验证方式的不同&#xff0c;可以把通配符证书划分为DV通配符&#xff08;基础型&#xff09;和OV通配符&#xff08;组织型&#xff…

Docker之微服务实战(一个小的java的jar包发布运行测试test)

Docker微服务实战 1、通过IDEA新建一个普通微服务模块 &#xff08;在工具idea里面新建项目…&#xff0c;&#xff09; 通过dockerfile发布微服务部署到docker容器 2、IDEA工具里面搞定微服务jar包 docker_boot-0.0.1-SNAPSHOT.jar 3、编写Dockerfile # 基础镜像使用java FR…

【每日一题】最大子数组和

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;动态规划方法二&#xff1a;分治方法三&#xff1a;前缀和 写在最后 Tag 【动态规划】【前缀和】【数组】【2023-11-20】 题目来源 53. 最大子数组和 题目解读 找出数组 nums 中连续子数组元素和的最大值。数组中的元…

echarts 实现3D立体柱状图示例

该示例有如下几个特点&#xff1a; ①实现tooltip自定义样式&#xff08;echarts 实现tooltip提示框样式自定义-CSDN博客&#xff09; ②数据为0时&#xff0c;顶部四边形不展示 ③legend图标设置为自定义图片 【第②也是一个难点&#xff0c;我没有找到其他解决办法&#xff…

JZM-D30室温探针台技术参数

概况&#xff1a; JZM-D30室温探针台的诸多设计都是专用的&#xff0c;探针台的配置主要是根据用户的需求进行选配及设计。例如&#xff0c;要求的磁场型号&#xff0c;电源型号&#xff0c;磁场值&#xff0c;样品台的尺寸等&#xff0c;除此之外&#xff0c;该探针台和我司自…

装备中国功勋企业——兰石重装,建设LTC全流程管理|基于得帆云低代码的CRM案例系列

兰石重型装备股份有限公司 兰石重型装备股份有限公司&#xff08;以下简称“兰石重装”&#xff09;成立于2001年&#xff0c;经营范围为炼油、化工、核电等能源领域所需的装备的设计、制造、安装、成套与服务&#xff1b;工程项目建设与服务&#xff1b;机械加工&#xff1b;检…

高版本Vivado和Linux 4.x内核移植Digilent Driver

移植环境 Vivado 2022.2Ubuntu 22.04petalinux 2022.2Linux内核4.14&#xff08;xilinx-linux-2018.3&#xff09;linux-digilent 主要问题 https://github.com/Digilent/linux-digilent 这些驱动支持Linux kernel release 4.x&#xff0c;然而和Vitis 2022.2 套件对应的内核…

Microsoft Visual Studio 2019下载及安装流程记录

第一周任务&#xff1a; 1.笔记本上安装vc2019的环境 2.再把OpenCV安装上 3.根据网上的教程&#xff0c;试着写几个opencv的程序 一、安装Visual Studio 2019社区版 首先先完成安装vc2019的环境&#xff0c; 因为&#xff1a; Microsoft Visual C是用于C编程的工具集合&am…

华为昇腾阿木实验室FMT,开展无人飞艇开发者线下体验活动!

活动背景 气球机器人是一种利用气球作为飞行平台的可编程飞行器&#xff0c;它利用浮力作为主要升力&#xff0c;在灵活性、稳定性和安全性方面展示了巨大的潜力。近年来&#xff0c;这些机器人已在航拍、气象观测、水文学、侦察和特勤等领域发挥了重要作用。 气球机器人是未来…

Chrome中设置安全来源域名

目的&#xff1a; 使得本地映射的域名能被浏览器安全访问&#xff0c;允许调用设备资源 步骤&#xff1a; 在Chrome中导航栏打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure 填入hosts域名&#xff1a;如 http://h5-twzc003.local.com 参考&#xff1a; h…

带哨兵位的单链表

认识 链表分为两种&#xff1a;带头结点的和不带头结点的 之前我们学习了不带哨兵位的单链表&#xff0c;并实现了相关代码 现在我们认识一下带哨兵位头结点的单链表&#xff1a; plist指向带哨兵位的头结点 这个结点不存储有效数据 如果为空链表&#xff1a; 不带头&#…

在Python中调用imageJ开发

文章目录 一、在ImageJ中进行Python开发二、在Python中调用imageJ开发2.1、简介2.2、环境配置2.3、测试一2.4、测试二 Python imageJ 解决方案&#xff0c;采坑记录 一、在ImageJ中进行Python开发 原生ImageJ仅支持JS脚本&#xff08;JAVAScript&#xff09;&#xff0c;而Im…