elementUi el-date-picker时间控件精确到时分秒

1.时间日期type=datetime

html 复制代码

<template>
  <el-date-picker
    v-model="time"
    :picker-options="pickerOptions"
    ref="datetime"
    type="datetime"
    :default-time="range"
    :disabled="disabled"
    placeholder="请选择日期时间"
    :format="format"
    :value-format="valueFormat"
  ></el-date-picker>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "DateTimePickerRange",
  props: {
    range: {
      type: String,
      default: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss") + " - 23:59:59"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ""
    },
    format: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    }
  },
  computed: {
    time: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      }
    }
  },
  watch: {
    time: {
      handler(newValue) {
        if (newValue != null && newValue !== "") {
          if (
            dayjs(new Date())
              .format("YYYY-MM-DD HH:mm:ss")
              .split(" ")[0] == newValue.split(" ")[0]
          ) {
            this.pickerOptions.selectableRange =
              dayjs(new Date())
                .format("YYYY-MM-DD HH:mm:ss")
                .split(" ")[1] + " - 23:59:59";
          } else {
            this.pickerOptions.selectableRange = "00:00:00 - 23:59:59";
          }
        }
      }
    }
  },
  data() {
    return {
      // 在elementUI文档中提供的pickerOptions，这里设置disabledDate限制日期，onPick根据选择的日期进而显示时间
      pickerOptions: {
        disabledDate(time) {
          const dateTime = new Date();
          const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
          return time.getTime() < new Date(startDateTime).getTime();
        },
        selectableRange: (() => {
          let date = new Date();
          let hour = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return `${hour}:${minute}:${second}` + " - 23:59:59";
        })()
      }
    };
  }
};
</script>

2.时间日期type=datetimerange

html 复制代码

<template>
  <el-date-picker v-model="timeArr" :picker-options="pickerOptions" ref="datetime" type="datetimerange"
    range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss"
    :default-time="defaultTime" :disabled="disabled" value-format="timestamp"></el-date-picker>
</template>

<script>
import dayjs from "dayjs";

const DateFormat = "YYYY-MM-DD";
const TimeFormat = "HH:mm:ss";
const StartTimeFormat = "00:00:00";
const ENDTimeFormat = "23:59:59";

export default {
  name: "DateTimePickerRange",
  props: {
    range: {
      type: Array,
      default: () => [dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), '23:59:59']
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    timeArr: {
      get() {
        return this.value || [];
      },
      set(newVal) {
        this.$emit('input', newVal);
      }
    },
    defaultTime() {
      return [dayjs(new Date()).format('HH:mm:ss'), '23:59:59'];
    }
  },
  data() {
    return {
      startDate: '',
      startTime: '',
      // 在elementUI文档中提供的pickerOptions，这里设置disabledDate限制日期，onPick根据选择的日期进而显示时间
      pickerOptions: {
        disabledDate: time => {
          const [start, end] = this.range;
          const d = new Date(time).getTime();
          const pickDate = dayjs(time).format(DateFormat);
          const startDate = dayjs(start).format(DateFormat);
          const startTime = dayjs(start).format(TimeFormat);
          const startStamp = new Date(start).getTime();
          const endStamp = new Date(end).getTime();
          // 组件（界面）上的日期 和 时间范围中最小的日期  相同时
          if (pickDate === startDate && startTime !== ENDTimeFormat) {
            return false;
          }
          // 这里不用判断时间范围中最大的日期
          return d < startStamp || d >= endStamp; // 小于最小日期 或者 大于最大日期
        },
        onPick: ({ minDate, maxDate }) => {
          if (!(minDate && maxDate)) {
            // 选择完整的日期后，再进入后面的逻辑
            return;
          }
          const picker = this.$refs.datetime && this.$refs.datetime.picker;
          const { minTimePicker, maxTimePicker } = picker.$refs;
          const [start, end] = this.range;
          const pickStartDate = dayjs(minDate).format(DateFormat); // 手动选择的最小日期
          const pickEndDate = dayjs(maxDate).format(DateFormat); // 手动选择的最大日期
          // const startDate = dayjs(start).format(DateFormat); // 时间范围this.range，最小日期 年月日
          // const startTime = dayjs(start).format(TimeFormat); // 时间范围this.range，最小时间 时分秒
          const startDate = dayjs(new Date()).format(DateFormat); // 时间范围this.range，最小日期 年月日
          const startTime = dayjs(new Date()).format(TimeFormat); // 时间范围this.range，最小时间 时分秒
          const endDate = dayjs(end).format(DateFormat); // 时间范围this.range，最大日期 年月日
          const endTime = dayjs(end).format(TimeFormat); // 时间范围this.range，最大日期 年月日

          this.startDate = startDate;
          this.startTime = startTime;

          // 手动选择的最小日期 等于 时间范围this.range的最小日期，那么需要限制时间范围
          if (pickStartDate === startDate) {
            minTimePicker.selectableRange = [
              [
                new Date(`${startDate} ${startTime}`),
                new Date(`${startDate} ${ENDTimeFormat}`)
              ]
            ];

          } else {
            // 不相等，则可以选择全部的时间范围，不需要做限制
            minTimePicker.selectableRange = [];
          }
          // 手动选择的最大日期 等于 时间范围this.range的最大日期，那么需要限制时间范围
          if (pickEndDate === endDate) {
            maxTimePicker.selectableRange = [
              [
                new Date(`${endDate} ${StartTimeFormat}`),
                new Date(`${endDate} ${endTime}`)
              ]
            ];
          } else {
            // 不相等，则可以选择全部的时间范围，不需要做限制
            maxTimePicker.selectableRange = [];
          }
        }
      }
    };
  },
};
</script>