element icon indicating copy to clipboard operation
element copied to clipboard

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

Open junhunlrw opened this issue 2 years ago • 6 comments

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?

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

junhunlrw avatar May 19 '23 08:05 junhunlrw

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

LPicker avatar Sep 07 '23 03:09 LPicker

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

junhunlrw avatar Sep 07 '23 03:09 junhunlrw

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

https://juejin.cn/post/7122879562643406884

StormKennen avatar Oct 18 '23 10:10 StormKennen

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

Shhuy avatar Oct 26 '23 02:10 Shhuy

研究了下源代码,可以这样搞, 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" />

chenkongming avatar Sep 09 '24 07:09 chenkongming

2025年了还没戏吗

zy0228 avatar Jan 08 '25 02:01 zy0228