<el-date-picker>配置禁用指定日期之前的时间选择(Vue2+Vue3)

今天突然接受到一个离谱的需求:有一个需要配置定时任务开始执行时间的组件,之前的做法都是用<el-form>的rules定义校验规则,也能实现效果,但是今天产品突发奇想:不能选的时间就置灰(就是我们说的禁用),直接一脸懵!不够最后还是好心的度娘拯救了我,但是网上大多是Vue2+ELement ui的解决方案,不过我们这个项目是Vue3+Element Puls,不过大差不差。下面我将vue2和vue3的实现方法总结如下:

一、实现原理

Element Ui和Element Plus官方提供的配置属性是不一样的,下面介绍一下两者提供的配置属性

1、Element Ui

Element Ui提供了Picker Options属性,里面有如下参数,其中disabledDate可以实现禁用指定日期的需求

2、Element Plus

在Element Plus则是通过disabled-date来实现判断日期是否禁用的方法

二、Vue2+Element ui 实现

html 复制代码
<el-date-picker
   v-model="date"
   type="date"
   size="small"
   value-format="yyyy-MM-dd"
   format="yyyy-MM-dd"
   :placeholder="'选择日期'"
   :picker-options="pickerOptions"
></el-date-picker>
javascript 复制代码
data(){
  return {
    pickerOptions: {
       disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
       }
    }
  }
}

提示:好像有网友说,vue2中这个指定日期的函数必须写到data中,不过我也没试,大家用的时候如果有问题,可以注意一下

三、Vue3+Element Plus 实现

html 复制代码
<el-date-picker
  v-model="createParams.startTime"
  class="!w-240px"
  type="datetime"
  placeholder="请选择任务开始时间"
  value-format="x"
  :show-now="false"
  :disabled-date="disabledDate"
/>
javascript 复制代码
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7// - 8.64e7是今天可以选
}

四、拓展

1、几个常用日期的禁用写法

禁用今日之后的日期(今天可选)

javascript 复制代码
const disabledDate = (time: Date) => {
  return time.getTime() > this.specifyDate - 8.64e7;  //禁用今天之后的日期(今天可选)
}

禁用指定日期,如禁用大于2025-10-01日期(当前可选)

javascript 复制代码
const disabledDate = (time: Date) => {
  return time.getTime() > new Date("2025-10-01").getTime() - 8.64e7;
}

2、解释一下上面设置时间的方法

(1)Date.now() 获取当前时间(表示自 UNIX 纪元开始(1970 年 1 月 1 日 00:00:00 (UTC))到当前时间的毫秒数)

(2)- 8.64e7表示可选择当天时间(注:小于当前时间,- 8.64e7 则是禁用日期不包含当前日,若大于当前日期, 8.64e7 则是禁用日期包含当前日)

time.getTime() < Date.now() - 8.64e7 禁用日期不包含当前日

time.getTime() > Date.now() - 8.64e7 禁用日期包含当前日

(3)time.getTime() < Date.now() - 8.64e7 代表只能选择今天之后的时间【包含今天】(8.64e7:科学计数法,代表8.64×10的7次方)

3、h5禁用指定日期不可选

html 复制代码
<input
   type="date"
   placeholder="请选择日期"
   id="finishTime"
   name="finishTime"
>

设置禁止选择小于今天的日期,通过min设置【max禁止选择大于今天的日期】

javascript 复制代码
const date_now = new Date();
const year = date_now.getFullYear();
const month = date_now.getMonth()+1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);
const date = date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
$("#finishTime").attr("min", year + "-" + month + "-" + date);
相关推荐
brzhang1 天前
ChatGPT Pulse来了:AI 每天替你做研究,这事儿你该高兴还是该小心?
前端·后端·架构
正义的大古1 天前
OpenLayers地图交互 -- 章节八:平移交互详解
javascript·vue.js·交互·openlayers
泉城老铁1 天前
springboot+vue 文件下载,实现大文件的分片压缩和下载,避免内存溢出
前端·spring boot·后端
用户203735549811 天前
Vue+Node+MongoDB高级全栈开发视频教程 完整版
前端
我是天龙_绍1 天前
setup 函数 和 setup 语法糖
前端
泉城老铁1 天前
Spring Boot和Vue.js项目中实现文件压缩下载功能
前端·spring boot·后端
我是天龙_绍1 天前
vue3 中,setup 函数 和 <script setup> 的区别
前端
LoveEate1 天前
vue 在el-tabs动态添加添加table
javascript·vue.js·elementui
krifyFan1 天前
vue3+elementPlus el-date-picker 自定义禁用状态hook 实现结束时间不能小于开始时间
前端·vue.js·elementui
一颗努力的大土豆1 天前
关于解决switch开关属性中active-value=“1“为数值形失败的问题
javascript·vue.js·elementui