Element Plus 日期时间选择器精确限制可选范围到时分秒

Element Plus 日期时间选择器精确限制可选范围到时分秒

引用

CSDN

1.

https://blog.csdn.net/qq_58978006/article/details/141164967

一、需求

在Vue3中，根据上一个日期选择器获取的时间范围作为下一个日期选择的可选范围，同时需要精确到时分秒。

实现的效果：

第一层日期选择器获取时间范围

第二层添加事件时根据上一层获取的时间范围来限定可选范围

二、代码

父组件

<template>
  <div>
    <el-date-picker
      v-model="inner_times"
      type="datetimerange"
      value-format="YYYY-MM-DD hh:mm:ss"
      start-placeholder="开始日期时间"
      end-placeholder="结束日期时间"
      :clearable="false"
    />
    <EventDialog
      v-if="eventDialogData.show"
      :nodeTime="inner_times"
      @close="closeEventDialog"
    ></EventDialog>
  </div>
</template>
<script setup lang="ts">
import EventDialog from "./EventDialog.vue";
const inner_times = ref([]);
const closeEventDialog = () => {
  eventDialogData.show = false;
};
</script>

子组件

• EventDialog.vue

关键属性：disabled-date、disabled-hours、disabled-minutes、disabled-seconds，用来控制不可选范围

<template>
  <div class="temp">
    <el-date-picker
      v-model="eventInfoTime"
      type="datetime"
      placeholder="请选择时间"
      :default-time="new Date()"
      :disabled-date="disabledDate"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      value-format="YYYY-MM-DD HH:mm:ss"
    />
  </div>
</template>
<script setup lang="ts">
import useEventDialog from "../hooks/useEventDialog";
const emit = defineEmits(["close"]);
const props = defineProps({
  nodeTime: {
    type: Object,
  },
});
let {
  handleClose,
  disabledDate,
  disabledHours,
  disabledMinutes,
  disabledSeconds,
  eventInfoTime,
} = useEventDialog(emit,props.nodeTime);
</script>

• useEventDialog.ts

startTime - 24 * 3600000，当获取范围最小日期时需要减去一天才能选取当天

import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
export default (emit: any,nodeTime: any) => {
  let eventInfoTime = ref([])
  const handleClose = () => {
    emit("close", "");
  };
  //限定日期
  function disabledDate(time: any) {
    const startTime = new Date(nodeTime[0]).getTime();
    const endTime = new Date(nodeTime[1]).getTime();
    const currentTime = time.getTime();
    return currentTime < startTime - 24 * 3600000 || currentTime > endTime; 
  }
  //限定小时
  function disabledHours() {
    const list = [];
    let selectTime: any = new Date(eventInfoTime).getTime();//当前日期选择器选择时间
    let formatTime: any = dayjs(selectTime).format("YYYY-MM-DD");//转化日期格式用于比较
    let startT: any = dayjs(nodeTime[0]).format("YYYY-MM-DD");//开始日期
    let endT: any = dayjs(nodeTime[1]).format("YYYY-MM-DD");//结束日期
    if (formatTime === startT) {
      for (let i = 0; i < 24; i++) {
        if (i >= new Date(nodeTime[0]).getHours()) continue;
        list.push(i);
      }
    } else if (formatTime === endT) {
      for (let i = 0; i < 24; i++) {
        if (i <= new Date(nodeTime[1]).getHours()) continue;
        list.push(i);
      }
    }
    return list;
  }
  //限定分钟
  function disabledMinutes(hour: number, role: string, comparingDate?: any) {
    const list = [];
    let selectTime: any = new Date(eventInfoTime).getTime();
    let formatTime: any = dayjs(selectTime).format("YYYY-MM-DD");
    let startT: any = dayjs(nodeTime[0]).format("YYYY-MM-DD");
    let endT: any = dayjs(nodeTime[1]).format("YYYY-MM-DD");
    let startH: any = dayjs(nodeTime[0]).format("H");
    let endH: any = dayjs(nodeTime[1]).format("H");
    if (formatTime === startT && hour <= startH) {
      for (let i = 0; i < 60; i++) {
        if (new Date(nodeTime[0]).getMinutes() <= i) continue;
        list.push(i);
      }
    } else if (formatTime === endT && hour >= endH) {
      for (let i = 0; i < 60; i++) {
        if (new Date(nodeTime[1]).getMinutes() >= i) continue;
        list.push(i);
      }
    }
    return list;
  }
  //限定秒
  function disabledSeconds(hour: number, minute: number, role: string, comparingDate?: any) {
    const list = [];
    let selectTime: any = new Date(eventInfoTime).getTime();
    let formatTime: any = dayjs(selectTime).format("YYYY-MM-DD");
    let startT: any = dayjs(nodeTime[0]).format("YYYY-MM-DD");
    let endT: any = dayjs(nodeTime[1]).format("YYYY-MM-DD");
    let startH: any = dayjs(nodeTime[0]).format("H");
    let endH: any = dayjs(nodeTime[1]).format("H");
    let startM: any = dayjs(nodeTime[0]).format("m");
    let endM: any = dayjs(nodeTime[1]).format("m");
    if (formatTime === startT && hour <= startH && minute <= startM) {
      for (let i = 0; i < 60; i++) {
        if (new Date(nodeTime[0]).getSeconds() <= i) continue;
        list.push(i);
      }
    } else if (formatTime === endT && hour >= endH && minute >= endM) {
      for (let i = 0; i < 60; i++) {
        if (new Date(nodeTime[1]).getSeconds() >= i) continue;
        list.push(i);
      }
    }
    return list;
  }
  return {
    handleClose,
    disabledDate,
    disabledHours,
    disabledMinutes,
    disabledSeconds,
    eventInfoTime,
  };
};

三、注意点

选择器中的disabled-date属性本身返回的范围就能够精确到分秒，但是在可选日期上最小日期的当天是不可选的，所以就需要先减去一天的时间然后再继续限定时分秒

可参考

日期时间选择器DateTimePicker限制可选时间范围