elementUI日期选择器,选择日期各种范围禁用

之前找到了很多帖子推荐picker-options这个api,但现在好像已经用不了了.

用了disabled-date和calendar-change结合.

1.如果只是禁用当前日期前后只需要disabled-date

 

  <el-date-picker
    v-model="createTime"
    :disabled-date="disabledDateFn"
    value-format="YYYY-MM-DD HH:mm:ss"
    start-placeholder="开始时间"
    end-placeholder="结束时间" />

let disabledDateFn = (time: any) => {
 return time.getTime() < Date.now() - 60 * 60 * 24 * 1000; //禁止选择今天以前的日期
  // return time.getTime() > Date.now(); //禁止选择今天以后的日期
  // 禁用今天起前三天&后三天
  // const now = new Date();
  // const day = 60 * 60 * 24 * 1000;
  // return now > time.getTime() + 4 * day || now < time.getTime() - 3 * day;
};

2.如果要禁用选择日期后的固定日期范围,则用了disabled-date和calendar-change结合.

 

  <el-date-picker
    v-model="createTime"
    :disabled-date="disabledDateFn"
    type="datetimerange"
    range-separator="~"
    @change="changeFn"
    :default-time="defaultTime"
    @calendar-change="calendarChangeFn"
    value-format="YYYY-MM-DD HH:mm:ss"
    start-placeholder="开始时间"
    end-placeholder="结束时间" />

import { ref } from "vue";
let createTime = ref("");
let startTime = ref("");
let defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
let disabledDateFn = (time: any) => {
  // 禁用选中日期起前三后三天
  if (startTime.value) {
    const day = 60 * 60 * 24 * 1000;
    return (
      time.getTime() > startTime.value.getTime() + 3 * day ||
      time.getTime() < startTime.value.getTime() - 3 * day
    );
  }
};
const changeFn = (val: any) => {
  if (!val) {
    startTime.value = "";
  }
};
// 如果用户没有选择日期,那默认展示当前日的月份.选中日历日期后会执行回调,只有datetimerange才生效
const calendarChangeFn = (time: any) => {
  startTime.value = time[0];
  if (time[1]) {
    // 选完时间后解禁时间范围
    startTime.value = "";
  }
};

完整代码如下:

<template>
  <el-date-picker
    v-model="createTime"
    :disabled-date="disabledDateFn"
    type="datetimerange"
    range-separator="~"
    @change="changeFn"
    :default-time="defaultTime"
    @calendar-change="calendarChangeFn"
    value-format="YYYY-MM-DD HH:mm:ss"
    start-placeholder="开始时间"
    end-placeholder="结束时间" />
</template>
<script setup lang="ts">
import { ref } from "vue";
let createTime = ref("");
let startTime = ref("");
let defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
let disabledDateFn = (time: any) => {
  // return time.getTime() < Date.now() - 60 * 60 * 24 * 1000; //禁止选择今天以前的日期
  // return time.getTime() > Date.now(); //禁止选择今天以后的日期
  // 禁用今天起前三天&后三天
  // const now = new Date();
  // const day = 60 * 60 * 24 * 1000;
  // return now > time.getTime() + 4 * day || now < time.getTime() - 3 * day;
  // 禁用选中日期起前三后三天
  if (startTime.value) {
    const day = 60 * 60 * 24 * 1000;
    return (
      time.getTime() > startTime.value.getTime() + 3 * day ||
      time.getTime() < startTime.value.getTime() - 3 * day
    );
  }
};
const changeFn = (val: any) => {
  if (!val) {
    startTime.value = "";
  }
};
// 如果用户没有选择日期,那默认展示当前日的月份.选中日历日期后会执行回调,只有datetimerange才生效
const calendarChangeFn = (time: any) => {
  startTime.value = time[0];
  if (time[1]) {
    // 选完时间后解禁时间范围
    startTime.value = "";
  }
};
</script>