El control de tiempo de elementui limita el rango de tiempo opcional (con precisión de horas, minutos y segundos)
Cuando desarrollamos proyectos web, los controles de tiempo se usan mucho, y restringir el tiempo opcional también es un requisito relativamente común, por ejemplo, no se puede seleccionar el tiempo pasado, o no se puede seleccionar el tiempo futuro, etc. el año, el mes y el día están limitados, es muy fácil de resolver, ¿y si es preciso en la hora, el minuto y el segundo? De hecho, también es muy simple. A continuación, veamos mis requisitos (mi requisito es que la hora pasada no se puede seleccionar y debe ser precisa en hora, minuto y segundo), y el código no tiene mucho que decir:
//我们在vue中的data中定义一个对象，绑定给时间组件
expireTimeOption: {
selectableRange:`${
moment().format('HH:mm:SS')} - 23:59:59`,//这里是限制可选时间到时分秒
//用当前时间减去一整天的时间，得到的就是当前时间到晚上13：59：59的区间
disabledDate(date) {
//这里是限制可选时间到年月日的
//disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
return date.getTime() < Date.now() - 3600 * 1000 * 24;
},
},
Pensé que terminaría así. Uno limita el año, el mes, el día y el otro limita la hora, el minuto y el segundo, pero habrá un error. Si son las 8 de la mañana, entonces No puedo elegir antes de las 8 de la mañana. Esto obviamente está mal. Entonces, ¿cómo lo solucionamos? código superior
//使用watch时间监听时间控件的值
watch: {
'form.startTime'(selectTime) {
const date = moment(selectTime).format('YYYY-MM-DD');
const today = moment().format('YYYY-MM-DD');
if (date === today){
//如果选择是日期是当天
// 先把时间控件的值赋值当前时间
this.form.startTime = moment().format('YYYY-MM-DD HH:mm:SS')
//然后限制时间小于此时此刻的时分秒不可选
this.expireTimeOption.selectableRange = `${
moment().format('HH:mm:SS')} - 23:59:59`
} else {
//如果选择是日期是明天或者更远的时间
// 先把时间控件的值赋值为一天的的开始
this.form.startTime = moment().format('YYYY-MM-DD 00:00:00')
// 然后把时分秒的限制放开
this.expireTimeOption.selectableRange = '00:00:00 - 23:59:59'
}
},
}