Vue 中使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

网上很多都是不完整的,我这里发布一个完整的

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

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

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

1.只能选择当日

javascript 复制代码
<el-date-picker
    format="yyyy 年 MM 月 dd 日"
    value-format="yyyy-MM-dd"
    v-model="ruleForm.shenqingshijian"
    type="date"
    :picker-options="pickerOptions"
    placeholder="申请时间">
</el-date-picker>


<script>
export default {
  data() {
    return {
      selectedDate: null,
   pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() || (time.getTime() < Date.now() - 8.64e7); }, },
    };
  },
};
</script>

2.限制只能选择当天之前的日期

javascript 复制代码
<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      :picker-options="pickerOptions"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
};
</script>

3.限制只能选择当天之后的日期

javascript 复制代码
<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      :picker-options="pickerOptions"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
    };
  },
};
</script>
相关推荐
fie88894 分钟前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行10 分钟前
深度神经网络训练过程与常见概念
前端
Simon_He40 分钟前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊1 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军2 小时前
React 协调器 render 阶段
前端·react.js·前端框架
中微子2 小时前
Blob 对象及 Base64 转换指南
前端
风铃喵游2 小时前
让大模型调用MCP服务变得超级简单
前端·人工智能