Element Plus 只能通过 disabledHours
,disabledMinutes
和 disabledSeconds
限制可选时间范围,官方写的是传入禁用时间段,我们的需求是动态传入可选时间范围
传入的时间为06:09:00~20:56:59可选
<el-time-picker :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
value-format="HH:mm:ss" v-model="input" align="right" placeholder="选择时分秒">
</el-time-picker>
// 传入的时间范围
const props = defineProps({
options: {
type: Object,
default: () => { }
},
})
// 方法
// 解析时间字符串为小时、分钟和秒钟
const parseTime = (time) => {
const parts = time.split(':');
return {
hour: parseInt(parts[0]),
minute: parseInt(parts[1]),
second: parseInt(parts[2])
};
};
// 生成范围数组
const makeRange = (start, end) => {
const result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
};
// 获取禁用的小时数组
const disabledHours = () => {
let minTime = props.options.rqMin || '00:00:00'
let maxTime = props.options.rqMax || '23:59:59'
const minHour = parseTime(minTime).hour;
const maxHour = parseTime(maxTime).hour;
return makeRange(0, 23).filter(hour => hour < minHour || hour > maxHour);
};
// 获取禁用的分钟数组
const disabledMinutes = (hour) => {
let minTime = props.options.rqMin || '00:00:00';
let maxTime = props.options.rqMax || '23:59:59';
const { hour: minHour, minute: minMinute } = parseTime(minTime);
const { hour: maxHour, minute: maxMinute } = parseTime(maxTime);
if (hour === minHour) {
return makeRange(0, minMinute - 1);
} else if (hour === maxHour) {
return makeRange(maxMinute + 1, 59);
} else {
return [];
}
};
// 获取禁用的秒钟数组
const disabledSeconds = (hour, minute) => {
let minTime = props.options.rqMin || '00:00:00';
let maxTime = props.options.rqMax || '23:59:59';
const { hour: minHour, minute: minMinute, second: minSecond } = parseTime(minTime);
const { hour: maxHour, minute: maxMinute, second: maxSecond } = parseTime(maxTime);
if (hour === minHour && minute === minMinute) {
return makeRange(0, minSecond - 1);
} else if (hour === maxHour && minute === maxMinute) {
return makeRange(maxSecond + 1, 59);
} else {
return [];
}
};