废话不多数说直接上代码
开始时间小于结束时间并且结束时间大于开始时间,包含时分秒
....
<el-form :model="filters">
<el-form-item label="开始时间">
<el-date-picker
v-model="filters.startTime"
type="datetime"
placeholder="请选择开始时间"
:disabled-date="pickerStartOptions"
:disabled-hours="disabledStartHours"
:disabled-minutes="disabledStartMinutes"
:disabled-seconds="disabledStartSeconds"
/>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="filters.endTime"
type="datetime"
placeholder="请选择结束时间"
:disabled-date="pickerEndOptions"
:disabled-hours="disabledEndHours"
:disabled-minutes="disabledEndMinutes"
:disabled-seconds="disabledEndSeconds"
/>
</el-form-item>
</el-form>
...
<script setup>
import dayjs from "dayjs";
const filters = reactive({
startTime: "",
endTime: "",
});
// 新增 pickerStartOptions 用于限制结束时间
const pickerStartOptions = (time) => {
if (!filters.endTime) return false;
return time.getTime() > new Date(filters.endTime).getTime();
};
const disabledStartHours = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD")
) {
const h = dayjs(new Date(filters.endTime)).hour();
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledStartMinutes = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
) {
const m = dayjs(new Date(filters.endTime)).minute();
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledStartSeconds = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
) {
const s = dayjs(new Date(filters.endTime)).second();
const tempArr = [];
for (let i = 60; i >= s; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
// 新增 pickerEndOptions 用于限制结束时间
const pickerEndOptions = (time) => {
if (!filters.startTime) return false;
return time.getTime() < new Date(filters.startTime).getTime();
};
const disabledEndHours = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD")
) {
const h = dayjs(new Date(filters.startTime)).hour();
const tempArr = [];
for (let i = 0; i < h; i++) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledEndMinutes = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
) {
const m = dayjs(new Date(filters.startTime)).minute();
const tempArr = [];
for (let i = 0; i < m; i++) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledEndSeconds = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
) {
const s = dayjs(new Date(filters.startTime)).second();
const tempArr = [];
for (let i = 0; i <= s; i++) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
</script>
加上当前日期时间的判断,不能晚于当前的日期
<script setup>
// 新增 pickerStartOptions 用于限制结束时间
const pickerStartOptions = (time) => {
const now = new Date();
if (!filters.endTime) return time.getTime() > Date.now(); // 禁用今天之前的日期
return time.getTime() > new Date(filters.endTime).getTime() || time.getTime() > now;
};
const disabledStartHours = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD")
) {
const now = new Date();
let h = dayjs(new Date(filters.endTime)).hour();
if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
h = h > now.getHours() ? now.getHours(): h;
}
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
return tempArr;
}
// 如果当前日期为当前日期,禁用当前时间之前的小时
if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
const h = now.getHours();
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledStartMinutes = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
) {
const now = new Date();
let m = dayjs(new Date(filters.endTime)).minute();
if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
m = m > now.getMinutes() ? now.getMinutes(): m;
}
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
return tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
&& dayjs(new Date(filters.startTime)).format("HH") === dayjs(now).format("HH")){
const m = now.getMinutes();
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledStartSeconds = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
) {
const now = new Date();
let s = dayjs(new Date(filters.endTime)).second();
if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
s = s > now.getSeconds() ? now.getSeconds(): s;
}
const tempArr = [];
for (let i = 60; i >= s; i--) {
tempArr.push(i);
}
return tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if(dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
&& dayjs(new Date(filters.startTime)).format("HH:mm") === dayjs(now).format("HH:mm")){
const s = now.getSeconds();
const tempArr = [];
for (let i = 60; i > s; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
// 新增 pickerEndOptions 用于限制结束时间
const pickerEndOptions = (time) => {
const now = new Date();
if (!filters.startTime) return time.getTime() > Date.now();
return(dayjs(new Date(time.getTime())).format("YYYY-MM-DD") < dayjs(filters.startTime).format("YYYY-MM-DD"))
|| time.getTime() > now;
};
const disabledEndHours = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD")
) {
const h = dayjs(new Date(filters.startTime)).hour();
const tempArr = [];
for (let i = 0; i < h; i++) {
tempArr.push(i);
}
const now = new Date();
if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
for (let i = 24; i > now.getHours(); i--) {
tempArr.push(i);
}
}
return tempArr;
}
if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
const h = now.getHours();
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledEndMinutes = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH")
) {
const m = dayjs(new Date(filters.startTime)).minute();
const tempArr = [];
for (let i = 0; i < m; i++) {
tempArr.push(i);
}
const now = new Date();
if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
for (let i = 60; i > now.getMinutes(); i--) {
tempArr.push(i);
}
}
return tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
&& dayjs(new Date(filters.endTime)).format("HH") === dayjs(now).format("HH")){
const m = now.getMinutes();
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
const disabledEndSeconds = () => {
if (
dayjs(new Date(filters.startTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(filters.endTime)).format("YYYY-MM-DD HH:mm")
) {
const s = dayjs(new Date(filters.startTime)).second();
const tempArr = [];
for (let i = 0; i <= s; i++) {
tempArr.push(i);
}
const now = new Date();
if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")){
for (let i = 60; i > now.getSeconds(); i--) {
tempArr.push(i);
}
}
return tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if(dayjs(new Date(filters.endTime)).format("YYYY-MM-DD") === dayjs(now).format("YYYY-MM-DD")
&& dayjs(new Date(filters.endTime)).format("HH:mm") === dayjs(now).format("HH:mm")){
const s = now.getSeconds();
const tempArr = [];
for (let i = 60; i > s; i--) {
tempArr.push(i);
}
return tempArr;
}
return [];
};
</script>
究极使用方法,抽成一个组件
// utils.js
/**
*
* @param {选择时回调传入的时间} time
* @param {记录的开始时间} startDateTime
* @param {结束时间} endDateTime
* @param {是否需要判断要早于当前时间} judgeCurrentTime
* @returns
*/
startPickerOptions(time, startDateTime, endDateTime, judgeCurrentTime = true) {
const limits = {
disabledDate: false,
disabledHour: [],
disabledMinute: [],
disabledSecond: [],
};
const now = new Date();
if (judgeCurrentTime) {
if(time){
if (!endDateTime)
{
limits.disabledDate = time.getTime() > Date.now(); // 禁用今天之前的日期
}
else{
limits.disabledDate =
time.getTime() > new Date(endDateTime).getTime() ||
time.getTime() > now;
}
}
// 如果当前日期为当前日期,禁用当前时间之前的小时
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
) {
let h = dayjs(new Date(endDateTime)).hour();
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
h = h > now.getHours() ? now.getHours() : h;
}
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
limits.disabledHour = tempArr;
}
// 如果当前日期为当前日期,禁用当前时间之前的小时
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
const h = now.getHours();
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
limits.disabledHour = tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
) {
let m = dayjs(new Date(endDateTime)).minute();
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
m = m > now.getMinutes() ? now.getMinutes() : m;
}
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
limits.disabledMinute = tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD") &&
dayjs(new Date(startDateTime)).format("HH") ===
dayjs(now).format("HH")
) {
const m = now.getMinutes();
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
limits.disabledMinute = tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
) {
let s = dayjs(new Date(endDateTime)).second();
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
s = s > now.getSeconds() ? now.getSeconds() : s;
}
const tempArr = [];
for (let i = 60; i >= s; i--) {
tempArr.push(i);
}
limits.disabledSecond = tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD") &&
dayjs(new Date(startDateTime)).format("HH:mm") ===
dayjs(now).format("HH:mm")
) {
const s = now.getSeconds();
const tempArr = [];
for (let i = 60; i > s; i--) {
tempArr.push(i);
}
limits.disabledSecond = tempArr;
}
} else {
if(time){
if (!endDateTime){
limits.disabledDate = false;
}
else
{
limits.disabledDate = time.getTime() > new Date(endDateTime).getTime();
}
}
// 如果当前日期为当前日期,禁用当前时间之前的小时
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
) {
let h = dayjs(new Date(endDateTime)).hour();
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
limits.disabledHour = tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
) {
let m = dayjs(new Date(endDateTime)).minute();
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
limits.disabledMinute = tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
) {
let s = dayjs(new Date(endDateTime)).second();
const tempArr = [];
for (let i = 60; i >= s; i--) {
tempArr.push(i);
}
limits.disabledSecond = tempArr;
}
}
return limits;
}
// 结束时间的调用方法
endPickerOptions(time, startDateTime, endDateTime, judgeCurrentTime = true) {
const limits = {
disabledDate: false,
disabledHour: [],
disabledMinute: [],
disabledSecond: [],
};
const now = new Date();
if (judgeCurrentTime) {
if(time){
if (!startDateTime) {
limits.disabledDate = time.getTime() > Date.now();
}
else{
limits.disabledDate =
dayjs(new Date(time.getTime())).format("YYYY-MM-DD") < dayjs(startDateTime).format("YYYY-MM-DD") ||
time.getTime() > now
}
}
// 如果当前日期为当前日期,禁用当前时间之前的小时
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
) {
const h = dayjs(new Date(startDateTime)).hour();
const tempArr = [];
for (let i = 0; i < h; i++) {
tempArr.push(i);
}
if (
dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
for (let i = 24; i > now.getHours(); i--) {
tempArr.push(i);
}
}
limits.disabledHour = tempArr;
}
else if (
dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
const h = now.getHours();
const tempArr = [];
for (let i = 24; i > h; i--) {
tempArr.push(i);
}
limits.disabledHour = tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
) {
const m = dayjs(new Date(startDateTime)).minute();
const tempArr = [];
for (let i = 0; i < m; i++) {
tempArr.push(i);
}
if (
dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
for (let i = 60; i > now.getMinutes(); i--) {
tempArr.push(i);
}
}
limits.disabledMinute = tempArr;
}
else if (
dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD") &&
dayjs(new Date(endDateTime)).format("HH") ===
dayjs(now).format("HH")
) {
const m = now.getMinutes();
const tempArr = [];
for (let i = 60; i > m; i--) {
tempArr.push(i);
}
limits.disabledMinute = tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
) {
const s = dayjs(new Date(startDateTime)).second();
const tempArr = [];
for (let i = 0; i <= s; i++) {
tempArr.push(i);
}
if (
dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD")
) {
for (let i = 60; i > now.getSeconds(); i--) {
tempArr.push(i);
}
}
limits.disabledSecond = tempArr;
}
else if (
dayjs(new Date(endDateTime)).format("YYYY-MM-DD") ===
dayjs(now).format("YYYY-MM-DD") &&
dayjs(new Date(endDateTime)).format("HH:mm") ===
dayjs(now).format("HH:mm")
) {
const s = now.getSeconds();
const tempArr = [];
for (let i = 60; i > s; i--) {
tempArr.push(i);
}
limits.disabledSecond = tempArr;
}
}
else{
if(time){
if (!startDateTime){
limits.disabledDate = false;
}
else{
limits.disabledDate = dayjs(new Date(time.getTime())).format("YYYY-MM-DD") < dayjs(startDateTime).format("YYYY-MM-DD");
}
}
// 如果当前日期为当前日期,禁用当前时间之前的小时
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD")
) {
const h = dayjs(new Date(startDateTime)).hour();
const tempArr = [];
for (let i = 0; i < h; i++) {
tempArr.push(i);
}
limits.disabledHour = tempArr;
}
// 如果当前日期为当前日期并且是当前小时,禁用当前时间之前的分钟
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH")
) {
const m = dayjs(new Date(startDateTime)).minute();
const tempArr = [];
for (let i = 0; i < m; i++) {
tempArr.push(i);
}
limits.disabledMinute = tempArr;
}
// 如果当前日期为当前日期并且是当前小时当前分钟,禁用当前时间之前的秒
if (
dayjs(new Date(startDateTime)).format("YYYY-MM-DD HH:mm") ===
dayjs(new Date(endDateTime)).format("YYYY-MM-DD HH:mm")
) {
const s = dayjs(new Date(startDateTime)).second();
const tempArr = [];
for (let i = 0; i <= s; i++) {
tempArr.push(i);
}
limits.disabledSecond = tempArr;
}
}
return limits;
}
使用方法
<el-form-item label="开始时间">
<el-date-picker
v-model="filters.checkDateBegin"
type="datetime"
placeholder="请选择开始时间"
:disabled-date="(time) => utils.startPickerOptions(time, filters.checkDateBegin, filters.checkDateEnd).disabledDate"
:disabled-hours="()=> utils.startPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledHour"
:disabled-minutes="()=> utils.startPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledMinute"
:disabled-seconds="()=> utils.startPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledSecond"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="filters.checkDateEnd"
type="datetime"
placeholder="请选择结束时间"
:disabled-date="(time) => utils.endPickerOptions(time, filters.checkDateBegin, filters.checkDateEnd).disabledDate"
:disabled-hours="()=> utils.endPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledHour"
:disabled-minutes="()=> utils.endPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledMinute"
:disabled-seconds="()=> utils.endPickerOptions('', filters.checkDateBegin, filters.checkDateEnd).disabledSecond"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>