首页 > 其他分享 >el-date-picker element Plus 实现限制时间选择范围(7天)

el-date-picker element Plus 实现限制时间选择范围(7天)

时间:2023-08-02 11:23:55浏览次数:33  
标签:picker el const getTime value choiceDate 日期 time element

element Plus 没有picker-options配置项,可以使用 :disabled-date="disabledDate" @calendar-Change="calendarChange" 配合实现该需求

<el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabled-date="disabledDate"
          @calendar-Change="calendarChange"
        />
const choiceDate = ref(null)

const disabledDate = (time:any)=>{
  // 如何选择了一个日期
  if (choiceDate.value) {
      // 7天的时间戳
      const one = 6 * 24 * 3600 * 1000;
      // 当前日期 - one = 7天之前
      const minTime = choiceDate.value - one;
      // 当前日期 + one = 7天之后
      const maxTime = choiceDate.value + one;
      return (
        time.getTime() < minTime ||
        time.getTime() > maxTime
        // 限制不能选择今天及以后
        // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
      );
    } else {
      // 如果没有选择日期,就要限制不能选择今天及以后
      // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
    }
}
const calendarChange = (obj:any)=>{
  const minDate = obj[0]
  const maxDate = obj[1]
  // 把选择的第一个日期赋值给一个变量。
  choiceDate.value = minDate.getTime();
  // 如何你选择了两个日期了,就把那个变量置空
  if (maxDate) choiceDate.value = null;
}

标签:picker,el,const,getTime,value,choiceDate,日期,time,element
From: https://www.cnblogs.com/wutong-211/p/17600098.html

相关文章

  • FPGA学习笔记 Label: Research
    [Synth8-9486]formalport'addr'hasnoactualordefaultvalue[D:/FPGA/TEST_CARD_HIT/top.vhd:492]有端口没有连接,在top文件中把端口加上 [Opt31-67]Problem:ALUT2cellinthedesignismissingaconnectiononinputpinI1,whichisusedbytheLUTequat......
  • idea汉化教程 jetbrains系列工具DataGrip PyCharm WebStorm Intellij IDEA Goland cli
    这里以pycharm举例演示其他的ide类似操作。打开pycharmIDE如果是初次打开工具没有任何项目的情况下界面如下直接点击左侧plugins->输入chinese->选择Chinese(Simplified)点击Install。安装完成后重启IDE就已经是中文版了。有项目的情况界面如下点击File->settin......
  • shell基本语法
    shell定义变量不能=号之间不能有空格定义:弱语言输出变量:echo${变量名称}(花括号可以省略)作用域:在外面定义的变量,在里面没有环境变量为全局变量判断命令是否执行成功:$?=0说明上条命令执行成功$?=1~255说明上条命令执行失败单引号和双引号的区别:单引号不能识别特殊语法......
  • EXCEL获取拼音首字母
    Excel2016按组合键ALT+F11调出VB窗口——插入——模块(复制代码到新模块中,复制完后始可关闭VB窗口)复制以下代码到模块中Functiongetpychar(char)tmp=65536+Asc(char)If(tmp>=45217Andtmp<=45252)Thengetpychar="A"ElseIf(tmp>=45253......
  • elinks
    elinks纯文本界面的WWW浏览器补充说明elinks命令能实现一个纯文本界面的WWW浏览器,操作方式与“lynx”类似。语法elinks(选项)(参数)选项-anonymous:是否使用匿名帐号方式;-auto-submit:对于偶然遇到的第一个表单是否自动提交;-config-dir:指定elinks指令运行时读取和写入自......
  • shell命令概述 Shell作用:命令解释器 介于操作系统内核与用户之间,负责解释命令行 获得
    shell命令概述Shell作用:命令解释器介于操作系统内核与用户之间,负责解释命令行获得命令帮助内部命令help命令的“--help”选项使用man命令阅读手册页命令行编辑的几个辅助操作Tab键:自动补齐反斜杠“\”:强制换行快捷键Ctrl+U:清空至行首快捷键Ctrl+K:清空至行尾快捷键Ctr......
  • centos7.9 部署elasticsearch 7.17.8 集群
    准备基本环境名称ip地址cpu内存es监听端口redis-65110.0.2.18c64G9200redis-65210.0.2.28c64G9200redis-65310.0.2.38c64G9200搭建集群10.0.2.1主机配置基本环境#更新hosts文件cat/etc/hosts10.0.2.1 es-node-110.0.2.2 es-node-21......
  • Vue组件可以使用v-model实现双向数据绑定
    Vue组件可以使用v-model实现双向数据绑定。在组件中,可以在props中定义一个value属性,并在组件中的对应位置使用v-model进行绑定。例如:Copy<template><div><input:value="value"@input="$emit('input',$event.target.value)"></div></template......
  • v-model 用法详解
    基础用法v-model是vue的一个基础指令,用于表单的双向数据绑定<inputv-model="message"placeholder="editme"><p>Messageis:{{message}}</p>v-model原理一个组件上的v-model默认会利用名为value的prop和名为input的事件<inputv-model="searchText"......
  • v-model的副作用
    如果v-model绑定的是响应式对象上某个不存在的属性,那么vue会悄悄的增加这个属性,并让他响应式。响应式数据中没有定义 user.tel 属性,但是 template 里却用 v-model 绑定了 user.tel,当你输入时会发生什么?答案:user 上会新增 tel 属性,并且 tel 这个属性还是响应式的......