Muchos escenarios del proyecto utilizan componentes de selección de rango de tiempo:
En este momento, lo que elegimos demasiado fue el componente el-date-picker en el elemento ui, pero tampoco nos gustó la fealdad original de los demás.
Así que elijo montarlo yo mismo. ¿Hay alguien que escriba como yo?
//页面组件
<el-col :span="6">
<el-date-picker
v-model="datePickerStart"
:disabled-date="disabledDateStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始时间" />
</el-col>
<el-col :span="1">
<div class="blockText">-</div>
</el-col>
<el-col :span="6">
<el-date-picker
v-model="datePickerEnd"
:disabled-date="disabledDateEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束时间" />
</el-col>
//日期禁用方法
disabledDateStart(time) {
const beginDateVal = this.datePickerEnd;
if (beginDateVal) {
return (
time.valueOf() >=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
},
disabledDateEnd(time) {
const beginDateVal = this.datePickerStart;
if (beginDateVal) {
return (
time.valueOf() <=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
},
Se descubre que enableDate nunca se activa y no se ingresará el método deshabilitado. Después de pensarlo una y otra vez, leí en el sitio web oficial que no son los Atributos del componente.
Jaja, así se usó al final:
<el-date-picker
v-model="datePickerStart"
type="date"
:picker-options="{ disabledDate: disabledDateStart }"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
También se puede usar así
<el-date-picker
v-model="datePickerStart"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
//在date里定义
data() {
return {
pickeroptions: {
disabledDate: time => {
const beginDateVal = this.datePickerEnd;
if (beginDateVal) {
return (
time.valueOf() >=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
}
},
datePickerStart: "",
datePickerEnd: "",
}
}
La primera recomendación personal está en línea con nuestra lógica diaria.