首页 > 其他分享 >vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内

vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内

时间:2022-11-24 16:13:44浏览次数:70  
标签:vue return getTime 今天 time Date 8.64 选择器

 

 

举例:只能选今天或者今天之后的时间(如下图)

 

         <el-date-picker clearable
            v-model="form.limitTime"
            type="date"
            :readonly="isDetail"
            value-format="yyyy-MM-dd"
            :picker-options="expireTimeOPtion"
            placeholder="请选择处理期限">
          </el-date-picker>

注意::picker-options="expireTimeOPtion"

 

一、只能选择今天或者今天之后的时间

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

 

二、今天以及今天之前的日期

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

 

三、只能选取今天往后三天内

data() {
  return {
   expireTimeOPtime: {
        disabledDate(time) {
          const times = new Date(new Date().toLocaleDateString()).getTime() + 3 * 8.64e7 - 1
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times  // 如果没有后面的-8.64e7就是不可以选择今天的
        }
      }
  }
}

 

完结撒花!赶快试试吧!

 

 

 

作者:微微一笑绝绝子
出处:https://www.cnblogs.com/wwyxjjz/p/16922199.html
本博客文章均为作者原创,转载请注明作者和原文链接。

 

标签:vue,return,getTime,今天,time,Date,8.64,选择器
From: https://www.cnblogs.com/wwyxjjz/p/16922199.html

相关文章

  • Vue 学习笔记(二)
    1、在构建时,发现警告了,升级npm到最新版$npminitvitevue-demo√Selectaframework:»Vue√Selectavariant:»TypeScriptScaffoldingprojectinD:\vscod......
  • vue兄弟通信--窗口随动
    效果:左右窗口移动到隐藏后,旁边的小窗口会随着移动贴边。知识点:兄弟组件通信1.新建Bus.js文件Bus.js内容:importVuefrom'vue';exportdefaultnewVue();2......
  • springboot+vue+element-ui实现前后端的全部校验
    1、前端校验el-form的表单校验<el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-itemlabel......
  • Vue:要求录入数据用户和登录用户不一致时不允许修改数据
    在做项目时遇到了一个问题:要求录入数据用户和登录用户不一致时不允许修改数据最开始的时候我想的很简单直接验证就行:(其他内容不展示,只展示按钮)<div> <buttonclass="bu......
  • 求超大文件上传方案( vue )
    ​ 前言:因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传,而自己对java文件上传这一块未接触过,且对Http协议较模糊,故这次采用渐进的方式来学习文件上传的......
  • 一个Nginx部署多个vue前端项目总结
    摘要:近来接手了一个二次开发的前后端分离模式的项目,其中在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下,那么我们这里就要用到Nginx了,接下来我们看看如何在......
  • Vue 评论@人功能实现
       <template><divclass="content-container"><el-dialog:title="title":visible.sync="dialogVisible"width="540px":appe......
  • vue table直接定位到指定元素
    vue+element中的表格,直接定位到指定的元素。需求:点击某一个节点,弹窗,直接定位到点击的节点,高亮并显示数据。<el-tableref="highTable":data="treeData"highli......
  • [未解决] vue 重启电脑后项目报错,某个全局变量未定义
    问题昨天上班还运行得好好的,今天启动就报错了,无法进入系统。尝试删除node_modules和package-lock.json,重新npminstall,无效;再次重启电脑,无效;清除浏览器缓存,清除cook......
  • vue表单必填项前面添加红色*
    vue表单必填项前面添加红色*和提示信息1.效果图2.实现代码(1)from表单定义:rules="rules",:model="headerForm"(2)文本框或者下拉框定义:rules="rules.XXXX",prop="XX......