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

我是LJL啦2024-05-12 12:57

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

- 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>