vue el-date-picker 日期选择器禁用失效问题
当value-format="yyyy-MM-dd"
的格式不要改为"yyyyMMdd"
,否则会导致日期选择器禁用失效问题,因为该组件默认的格式就是yyyy-MM-dd。
<el-col v-for="(item, index) in formData" :key="index" >
<el-date-picker
v-else-if="item.type === 'datePicker'"
v-model="form[item.prop]"
:placeholder="item.placeholder"
:picker-options="item.pickerOptions"
type="date"
value-format="yyyy-MM-dd"
clearable
/>
</el-col>
在表单渲染时会调用this.beginDate()
和this.endDate()
data() {
return {
formData: [
{
type: 'datePicker',
placeholder: '起始日期',
prop: 'startDate',
pickerOptions: this.beginDate()
},
{
type: 'datePicker',
placeholder: '截止日期',
prop: 'endDate',
pickerOptions: this.endDate()
}
]
}
}
methods: {
beginDate() {
const self = this;
return {
// 组件的方法,禁用返回的日期
disabledDate(time) {
if (self.form.endDate) {
// 禁用大于结束日期的日期
return time.getTime() > new Date(self.form.endDate).getTime();
}
}
};
},
endDate() {
const self = this;
return {
disabledDate(time) {
if (self.form.startDate) {
// 禁用小于开始日期的日期
return time.getTime() < new Date(self.form.startDate).getTime();
}
}
};
}
}