首页 > 其他分享 >element中datetimerange限制时间的选择范围

element中datetimerange限制时间的选择范围

时间:2023-04-25 10:23:07浏览次数:43  
标签:限制 getTime timeRange element minTime 时间 time maxTime datetimerange

<el-date-picker
   v-model="Hour"
   type="datetimerange"
   :picker-options="pickerOptions"
   range-separator="-"
   format="yyyy-MM-dd HH"
   value-format="yyyy-MM-dd HH"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
>
</el-date-picker>
----------------------------------------------------------------
 pickerOptions:{
  //注意,如果使用this,下面的方法要使用箭头函数。
   onPick(time) => {
     // 如果选择了只选择了一个时间
     if (!time.maxDate) {
        let timeRange = 2*24*60*60*1000 // 2天
        this.minTime = time.minDate.getTime() - timeRange // 最小时间--前面两天
        this.maxTime = time.minDate.getTime() + timeRange // 最大时间--后面两天
        // 如果选了两个时间,那就清空本次范围判断数据,以备重选
     } else {
        this.minTime = this.maxTime = null
     }
   },
   disabledDate(time) => {
      // onPick后触发
      // 该方法会轮询当3个月内的每一个日期,返回false表示该日期禁选
      if(this.minTime && this.maxTime){
         return time.getTime() < this.minTime || time.getTime() > this.maxTime
      }
   }
 },

标签:限制,getTime,timeRange,element,minTime,时间,time,maxTime,datetimerange
From: https://www.cnblogs.com/zly-web/p/17351847.html

相关文章

  • Vue2和ElementUI编写的无限级菜单路由
    Vue2和ElementUI编写的无限级菜单路由文章转载自:www.javaman.cn<template><div><el-menu:default-active="$route.path"class="el-menu-vertical-demo":collapse="isCollapse"router><templatev-for="item......
  • ElementUI: Uncaught (in promise) cancel 报错
    场景:使用element confirm组件时,点击【取消】按钮,提示错误 Uncaught(inpromise)cancel 代码如下:open(){this.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',......
  • 利用注册表限制TLS加密算法
    SChannelSSP是window实现TLS、DTLS和SSL协议的版本。不同的Windows发行版支持不同的协议版本启动注册表编辑器(Regedt32.exe),并找到以下注册表项:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Ciphers例如TripleDES168子项是D......
  • Element 级联选择器(Cascader)点击文字(或者一行)选中样式回显
    预览图实现的效果1、选中最后一级,下拉框收缩2、下拉框的每一行点击都可以选中3、点击radio,也能实现选中最后一级,下拉框收缩组件代码<el-cascaderref="cascaderHandleRef"v-model="languageIds"class="width-260":options="languageList":props="{check......
  • k8s 能做到限制pod在节点的指定cpu核心上运行吗?用--cpuset 方式实现,请给出一个具体案
    在Kubernetes中,可以使用--cpuset方式来限制Pod在节点的指定CPU核心上运行。这可以通过在Pod的yaml文件中设置容器启动命令来实现。具体地,我们可以在容器的启动命令中使用--cpuset选项来指定需要运行的CPU核心。下面是一个典型的使用--cpuset选项的Pod的yaml文件示例:apiVersion:......
  • Element-ui的el-table更新表格局部数据状态
    需求:渲染了一个表格,其中一列的数据较多,超过5条添加展开收起重点:table一定要设置key值。否则更新不生效。 ......
  • elementui 多图上传限制数量隐藏加号
    参考:https://blog.csdn.net/qq_41555695/article/details/93491140完整的elementui多图上传组件<template><el-upload:action="MixinUploadAllApi":headers="headers"list-type="picture-card":file-list="fileL......
  • centos7修改服务文件描述符限制
    在CentOS7中,系统默认的文件描述符限制是1024。如果你需要增加文件描述符限制,可以按照以下步骤进行操作:打开/etc/security/limits.conf文件,并添加以下内容:*softnofile65536*hardnofile65536这将在系统级别上将文件描述符限制增加到65536。打开/etc/systemd/sys......
  • Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传
    我用的vue3,element-plus,没用ts搭建wangEditor 参考地址 https://www.cnblogs.com/xbxxf/p/16791084.html七牛云安装参考地址 https://blog.csdn.net/ldoit/article/details/121533204本来就是抄大佬的,就不复制粘贴了主要是整理关于七牛云部分的代码,秉着复制就能用的原则,我......
  • 为什么再html页面引用element复选框,只有名称值,没有复选框
    问题描述我引入了el-checkbox之后,发现浏览器页面只是显示里面的文字,并没有显示出来我想要看到的相应样式问题解决经过一定的百度查证可知,使用Element-UI组件时,我们需要用div标签将其包裹起来;然后使用script标签定义一下div里面的id属性,然后才能够引用到这个el-标签,让其中的样......