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

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

时间:2023-01-05 15:47:07浏览次数:59  
标签:vue return getTime 今天 time Date 8.64 选择器

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

转自于:https://www.cnblogs.com/wwyxjjz/p/16922199.html

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

 

复制代码
         <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就是不可以选择今天的
        }
      }
  }
}
复制代码

 四、只能选取今天往前七天内

data() {
  return {
// 日期范围限制在今天到之前的7天内
        expireTimeOPtime: {
          disabledDate(time) {
            const times =
              new Date(new Date().toLocaleDateString()).getTime() -
              7 * 8.64e7 -
              1;
            return time.getTime() > Date.now() || time.getTime() < times; // 如果Date.now() - 8.64e7没有后面的-8.64e7就是可以选择今天的
          }
        }
 }
}

  

完结撒花!赶快试试吧!

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

相关文章

  • Vue Day2-watch
    watch 监听数据的变化,从而实现相应的业务逻辑主要应用场景是监听数据的变化处理副作用。与处理数据无关的的操作都算副作用,如日志处理、异步请求、本地存储操作等......
  • vue-print-nb的应用
    1、cnpmivue-print-nb2、触发事件:v-print="printObj"3、触发的是个对象:printObj:{        id:'print', //需要打印的盒子     ......
  • Vue3路由的redirect重定向结合函数实现不同的用户身份跳转到不同的首页
    访问网页主域名的时候,识别用户身份跳转到不同的首页,配置路由重定向constroutes:Array<RouteRecordRaw>=[//访问主域名的时候,根据用户的登录信息,重定向到不同的页......
  • vue + uniapp实现手机横屏弹幕
    小程序,手持弹幕,输入文字之后,弹幕从右往左匀速划过,再次循环。实现这个功能,首先建一个uniapp项目,建一个vue页面<template> <viewclass="danmu_bg"> <viewclass="......
  • 在vue中watch和created哪个先执行?
      官网的生命周期图中,initreactivity是晚于beforeCreate但是早于created的。watch加了immediate:true,应当同initreactivity周期一同执行,会早于created执行。而正常......
  • vue2 vue3 禁用F12控制台 打印渲染新内容 禁用右键等
    constdisabled=()=>{//console.log('禁止脚本,运行成功');constconfig={rightKey:false,//是否开启右键菜单controller:fal......
  • vue面试考察知识点全梳理
    一、简介vue几个核心思想:数据驱动组件化虚拟dom、diff局部最优更新源码目录介绍Vue.js的源码在src目录下,其目录结构如下。src├──compiler#编译......
  • 校招前端一面必会vue面试题指南
    写过自定义指令吗?原理是什么回答范例Vue有一组默认指令,比如v-model或v-for,同时Vue也允许用户注册自定义指令来扩展Vue能力自定义指令主要完成一些可复用低层级DOM操......
  • uniapp + vue 实现色弱测试小游戏
    最终的效果:点击色块中不同的色块,跳到下一关准备一些静态数据,放到js目录下,在vue文件中引入即可//在1到比1大的任意整数之间随机取一个整数exportconstgetRandom......
  • Vue3中操作子组件实例
    子组件Child.vue<template><hr/>{{INFO}}<hr/><button@click="changeInfo">changeInfo</button></template><scriptsetuplang="ts">import{ref,r......