【ElementUI】日期选择器时间选择范围限制

2023-11-01

【ElementUI】日期选择器时间选择范围限制,根据接口灵活设置可选时间。只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

<el-date-picker
       v-model="value1"
       type="date"
       placeholder="选择日期"
       :picker-options="pickerOptions0">
</el-date-picker>

选择今天以及今天之后的日期

data (){ 
   return {
     pickerOptions0: { 
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
         }
    },
 
    }
 }

选择今天以及今天以前的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;//如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;
          }
        },  
   }     
} 

限制结束日期不能大于开始日期


<el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       :picker-options="pickerOptions1">
</el-date-picker>
data(){
    return {
         pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2 != "") {
                        return time.getTime() >  new Date(this.value2).getTime();
 
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < new Date(this.value1).getTime()- 1*24*60*60*1000;//减去一天的时间代表可以选择同一天;
                }
            },
    }      
}       

限制选择开始时间不能小于当前时间。并且结束时间不能大于开始时间(比上面多了层限时)

pickerOptions0: {//结束时间不能大于开始时间
                disabledDate: (time) => {
                    if (this.addForm.date_range_end) {
                        return time.getTime() > new Date(this.addForm.date_range_end).getTime();
                    }else{//还没有选择结束时间的时候,让他只能选择今天之后的时间包括今天
                        return time.getTime() < Date.now() - 8.64e7
                    } 
 
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    if(this.addForm.date_range_start){
                      return time.getTime() < new Date(this.addForm.date_range_start).getTime() - 1*24*60*60*1000;//可以选择同一天
                    }
                }
            },

根据接口给的时间戳来确定不可选择的日期区域、methods里面定义一个函数。传一个date的数据。注意date是时间戳的格式

 getdisabled(date) {

            this.pickerOptions= Object.assign({},this.pickerOptions,{

                disabledDate(time){

                    return time.getTime() < date;  //如果date格式是2020-7-23或者2020/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()

                }

            })

            },

然后你再获取接口给的时间戳的时候去调用这个函数就好了。

let date=1593743599769;

this.getdisabled(date)
原文链接:https://blog.csdn.net/qq_33769914/article/details/83856268

<el-form-item label="开始时间" prop="begintime" >
    <el-date-picker 
          v-model="form.begintime" 
          type="datetime" 
          placeholder="选择日期时间" 
          :picker-options="pickerOption()" 
          value-format="yyyy-MM-dd HH:mm"
          format="yyyy-MM-dd HH:mm">
     </el-date-picker>
</el-form-item>
        //精确到时分秒
        pickerOption() {
            // this.ruleForm.accidentTime 是上一条数据的开始时间
            if(this.ruleForm.accidentTime != undefined){
                let date = new Date(this.ruleForm.accidentTime)
                let minutes = date.getMinutes() + 1
                // // h和m 是将日期只取时分
                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                let m = (minutes < 10 ? '0' + minutes : minutes);
                // pickerDate 判断当前选择时间是否等于上条数据时间
                // 若等于时,限制时间从00:00:00 - 上条数据开始时间,不等于时,24小时可选
                let pickerDate = date.toDateString() === new Date(this.ruleForm.accidentTime).toDateString()
                return {
                    // 日期限制
                    disabledDate: (time) => {
                        let old = this.ruleForm.accidentTime
                        return time.getTime() < new Date(old).getTime() - 86400000  || time.getTime() > Date.now()
                    },
                    // 时间限制
                    selectableRange: pickerDate? h + m  + ':00 - 23:59:59' : '00:00:00 - 23:59:59'
                }
            }
        },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【ElementUI】日期选择器时间选择范围限制 的相关文章

随机推荐

  • 开源自动扫描工具OpenSCAP介绍

    OpenSCAP 是一个获得 SCAP 认证的免费开源的自动化扫描 基线核查 报告和自动修复工具 目前主要由 Redhat 进行维护 OpenSCAP 由工具和基线库两个部分组成 两者没有紧密的耦合关系 比如使用 http vuls io
  • 服务器ie安全增强关闭还是显示,如何关掉ie浏览器的增强安全配置

    在 Windows Sever 2012 中打开 IE 浏览器时 IE10 会出现 已启用 Internet Explorer 增强的安全配置 的提示信息 在安全性等级中会设置以 高安全性 如果我想要关闭 Internet Explorer
  • Anaconda系统配置、换源、环境隔离、pycharm环境配置一站式教程

    Anaconda配置一站式教程 欢迎访问我的博客sakura 绘梨衣 1 安装conda 这个下载 除了安装路径 无脑确定就行了 下载网址 Free Download Anaconda 选择安装系统直接下载 最好是不要安装在C盘 反对C盘战
  • Python对excel写入数据操作实例代码(只供参考)

    coding utf8 把buffer中的信息 写入到excel中 并按照要求 构造表格样式 导入readCSV模块 用来获取buffer数据 from readCSV import readCSV from readConfig impo
  • httpclient 工具类

    1 类 package com cainiao manage utils import org apache http HttpEntity import org apache http NameValuePair import org a
  • 类加载 器&反射

    一 类加载器 1 1类加载 1 2类加载器 理解 1 2 1类加载器的作用 1 2 2JVM的类加载机制 1 2 3Java中的内置类加载器 1 2 4ClassLoader 中的两个方法 二 反射 2 1反射的概述 理解 2 2获取Cla
  • 初学maven详细总结

    文章转载自 https www cnblogs com tzyy p 4768859 html 初学maven 简单总结一下学习心得 若有不对的地方 欢迎各位大神给我指正 总结分为6个部分 maven概述 maven安装 maven项目结构
  • Unity 动态修改宏定义

    宏定义可以方便的区分出不同情况下使用的代码 比较经典的就是 UNITY EDITOR 这类 if UNITY EDITOR Debug Log 当前是编辑器环境 else Debug Log 当前不是编辑器环境 endif 开发者同样可以自
  • 微调预训练模型huggingface,transformers

    首先加载Yelp Reviews数据集 from datasets import load dataset dataset load dataset yelp review full dataset train 100 如您现在所知 您需要
  • 怎么让Chrome浏览器支持小于12px的文字?

    Chrome浏览器默认字体大小是16px 每个浏览器默认字体大小可能不一样 0 8 10 8 px div font size 10px span display inline block webkit transform scale 0
  • Numpy数组的序列化和反序列化

    在处理图像数据时 有这么一种需求 图像通常是一个矩阵数据 需要将矩阵数据通过base64编码传输 传输完毕之后解码还原得到原来的矩阵数据 import numpy as np import base64 matrix data 1 2 3
  • python程序设计心得体会感想-python实训心得体会

    技术文档 主体内容 可以认为是页面最想表达的内容总和 对于内容详情页来说 主体内容指从标题开始至正文内容结束 翻页区域也被视为主体内容 文章后的评论 分享 推荐等不视为主体内容 首屏 用户点击搜索结果后进入移动页面 不滑动屏幕即看到的所有内
  • HashMap为什么要使用红黑树

    在JDK1 8之后 Java对HashMap做了改进 在链表长度大于8的时候 将后面的数据存到红黑树中 以加快检索速度 红黑树也是一种平衡二叉树 每个节点有一个储存位表示节点的颜色 可以是红色或者黑色 通过对任意一条从根到叶子的路径上各个节
  • C++编程习惯与编程要点

    假设现在我们要实现一个复数类complex 在类的实现过程中探索良好的编程习惯 Header 头文件 中的防卫式声明 complex h ifndef COMPLEX define COMPLEX class complex endif 防
  • 专利与论文-2:什么是专利?专利的几种类型?

    目录 1 什么是知识产权 2 什么是专利 3 专利的主要类型 1 什么是知识产权 知识产权 是关于人类在社会实践中创造的智力劳动成果的专有权利 各种智力创造比如发明 外观设计 文学和艺术作品 以及在商业中使用的标志 名称 图像 都可被认为是
  • 现在的00后,真是卷死了呀,辞职信已经写好了·····

    谁说00后躺平了 但是有一说一 该卷的还是卷 这不 上个月我们公司来了个00后 工作没两年 跳槽到我们公司起薪22K 都快接近我了 后来才知道人家是个卷王 从早干到晚就差搬张床到工位睡觉了 最近和他聊了一次天 原来这位小老弟家里条件不太好
  • python计算机视觉编程第六章 图像聚类

    图像聚类 图像聚类 什么是聚类 举个简单的例子 给出了左图中的点的数据 对其划分为三类 这个过程就叫做聚类 聚类实际上就是根据数据的特征进行分类 把相似的东西分在一起 难点 聚类是无监督的 如何在无监督的情况下尽可能分出更好的类别来是一个比
  • [管理与领导-63]:IT基层管理者 - 潜技能 - 1 - 职场中的陷阱 - 看清楚职场中的霸凌现象

    目录 前言 1 打击自尊心 2 孤立他人 3 恶意针对 4 当众羞辱 5 持续性否定 前言 职场中 什么样的人都有 害人之心不可有 防人之心不可无 前者教人从善 后者教善人如何保护自己受到 坏人 的伤害 有一种情形 每天上班都陷入抑郁 总是
  • 面向对象练习题-第十三天

    练习1 基础 建立一个学生类 其中成员变量为学号 姓名 及三门课的成绩 数组 另建立一个包含主方法的类 定义2个学生类的对象 1 Student package com hpe java import java util Arrays 建立
  • 【ElementUI】日期选择器时间选择范围限制

    ElementUI 日期选择器时间选择范围限制 根据接口灵活设置可选时间 只能选今天之前的时间 或者是只能选今天之后的时间 今天是否可以选 限制结束日期不能大于开始日期