需求:如上图所示,实现只有当前1小时后的时间可选,也就是选择当天的话需要限制时间选择器,如果选择的是今天之后的日期则不需要限制时间选择器。
一、ElementPlus的实现方法
实现思路
- 限制日期:使用DateTimePicker 日期时间选择器 的disabled-date禁用日期
- 限制时分秒:由于element plus的DateTime Picker组件只提供了disabled-date属性
这里时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds
实现代码
<el-date-picker
v-model="formData.pickupTime"
type="datetime"
class="g-field-box-input"
:teleported="false"
:disabled-date="(time: Date) => disabledDate(time)"
:disabled-hours="() => disabledHours(formData.pickupTime)"
:disabled-minutes="() => disabledMinutes(formData.pickupTime)"
:disabled-seconds="() => disabledSeconds(formData.pickupTime)"
placeholder="请选择"
/>
// 限制日期
function disabledTime(time: Date, Range = -24) {
return time.getTime() < Date.now() + Range * 3600 * 1000
}
// 限制小时
function disabledHours(time: string, Range = 1) {
const a: number[] = []
if (new Date(time).getTime() > Date.now() + 3600 * 1000)
return a
for (let i = 0; i < 24; i++) {
if (new Date().getHours() + Range <= i)
continue
a.push(i)
}
return a
}
// 限制分钟
export function disabledMinutes(time: string) {
const a: number[] = []
if (new Date(time).getTime() > Date.now() + 3600 * 1000)
return a
for (let i = 0; i < 60; i++) {
if (new Date().getMinutes() <= i)
continue
a.push(i)
}
return a
}
// 限制小时
export function disabledSeconds(time: string) {
const a: number[] = []
if (new Date(time).getTime() > Date.now() + 3600 * 1000)
return a
for (let i = 0; i < 60; i++) {
if (new Date().getSeconds() <= i)
continue
a.push(i)
}
return a
}
二、ElementUI的实现方法
实现思路
- 限制日期:使用DateTimePicker日期时间选择器的pickerOptions中的disabledDate禁用日期
- 限制时分秒:使用DateTimePicker日期时间选择器的pickerOptions中的selectableRange限制时分秒
实现方法
<el-date-picker
v-model="form.time"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm"
type="datetime"
placement="bottom-start"
size="small"
placeholder="请选择时间"
:picker-options="pickerOptions"
popper-class="g-unload-picker"
/>
export default {
data() {
pickerOptions: {
disabledDate: (time) => {
time.getTime() < Date.now() - 8.64e7
},
selectableRange: '00:00:00 - 23:59:59',
}
},
watch: {
'form.time': {
handler(newValue, oldValue) {
if (newValue) {
let date = new Date() // 当前时间
let min = date.getMinutes()
date.setMinutes(min + 60) // 设置最小时间,当前时间1小时后
let nowDate = dayjs(date).format('HH:mm:ss') // 当前1小时后的时间
let st = ''
if (dayjs(date).format('YYYY-MM-DD') === dayjs(newValue).format('YYYY-MM-DD')) {
let hh1 = dayjs(newValue).format('HH:mm:ss') // 选择时间的时分秒
// 判断当前选中的时间是不是小于十分钟后的时间,小于则赋值十分钟后的时间
if (hh1 < nowDate) {
this.form.time = date
}
st = nowDate
} else {
st = '00:00:00'
}
this.pickerOptions.selectableRange = st + ' - 23:59:59'
}
},
deep: true,
immediate: true,
}
}
}