[Bug Report] el-date-picker的type设为datetimerange也就是日期时间段选择的时候，无法限制到时分秒，比如我要今天的当前时间后才能选择，只能设置到天，不能设到时分秒

[junhunlrw]

Element UI version

2.15.13

OS/Browsers version

windows / chrome

Vue version

2.7.14

Reproduction Link

https://codepen.io/junhunlrw/pen/NWOExjm

Steps to reproduce

1、定义时间段的dom 2、设置options: pickerOptions:{ disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }

What is Expected?

希望当前时间之前的日期和时间都不能选择，比如当前时间为‘2023-05-19 16:34:22’，如果开始时间选了今天，那么时间选择那里就要把16:34:22之前的时间都禁掉

What is actually happening?

只能禁用掉年月日，禁不掉时分秒，一样可以选择当前时间之前的时分秒

[LPicker]

我也遇到了，后来怎么解决的呀

[junhunlrw]

https://segmentfault.com/q/1010000043807654?_ea=303653797

[StormKennen]

element组件，子组件有携带对应的方法，自己写下逻辑就行了，可以看一下文章

https://juejin.cn/post/7122879562643406884

[Shhuy]

在picker-options 中有 onPick配置，这个方法中，你可以通过ref获取对应的组件，然后通过设置selectableRange 来禁用时分秒

const date1 = ...
cosnt date2 = ...
const picker = this.$refs.dateTime?.picker
const {minTimePicker, maxTimePicker} = picker.$refs
minTimePicker.selectableRange = [date1, date2]
maxTimePicker.selectableRange = [date1, date2]

[chenkongming]

研究了下源代码，可以这样搞， const disabledDate = (time: Date) => { return time.getTime() < Date.now() - 8.64e7; }; const selectedTimeRange = ref({ start: null, end: null }); // 用于存储开始和结束时间 const handleCalendarChange = (val: [Date, null | Date]) => { selectedTimeRange.value = { start: val[0], end: val[1] }; }; const disabledHours = (type: string) => { const now = new Date(); if (!selectedTimeRange.value.start && !selectedTimeRange.value.end) { // 如果尚未选择任何时间，返回空数组 return []; } const selectedDate = type === 'start' ? selectedTimeRange.value.start : selectedTimeRange.value.end;

if (selectedDate) { const selectedDay = selectedDate.getDate(); const currentDay = now.getDate(); // 如果选择的是今天，则禁用当前小时之前的小时 if (selectedDay === currentDay) { return Array.from({ length: now.getHours() }, (_, i) => i); } } return []; }; const disabledMinutes = (hour: number, type: string) => { const now = new Date(); const selectedDate = type === 'start' ? selectedTimeRange.value.start : selectedTimeRange.value.end;

if (selectedDate) { const selectedDateTime = new Date(selectedDate); const isToday = selectedDateTime.getDate() === now.getDate(); const isCurrentHour = hour === now.getHours();

// 如果选择的日期是今天，且小时是当前小时，禁用当前分钟之前的分钟
if (isToday && isCurrentHour) {
  return Array.from({ length: now.getMinutes() }, (_, i) => i);
}

} return []; };

const disabledSeconds = (hour: number, minute: number, type: string) => { const now = new Date(); const selectedDate = type === 'start' ? selectedTimeRange.value.start : selectedTimeRange.value.end;

if (selectedDate) { const selectedDateTime = new Date(selectedDate); const isToday = selectedDateTime.getDate() === now.getDate(); const isCurrentHour = hour === now.getHours(); const isCurrentMinute = minute === now.getMinutes();

// 如果选择的日期、小时和分钟是当前时间，则禁用当前秒之前的秒
if (isToday && isCurrentHour && isCurrentMinute) {
  return Array.from({ length: now.getSeconds() }, (_, i) => i);
}

} return []; };

<el-date-picker v-model="disposableDateTime" type="datetimerange" range-separator="至" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @calendar-change="handleCalendarChange" :disabled-date="disabledDate" />