1.时间日期type=datetime

<template><el-date-pickerv-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

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