element的el-date-picker组件怎么设置点击日期直接选中
时间: 2023-11-08 07:59:01 浏览: 162
element-ui 限制日期选择的方法(datepicker)
可以通过设置 `picker-options` 属性来实现在点击日期后直接选中。具体做法是在 `picker-options` 中设置 `selectableRange` 为一个函数,该函数返回一个对象,其中包含 `disabledDate` 和 `select` 两个属性,`disabledDate` 表示哪些日期不可选,`select` 表示哪些日期默认选中。
例如,可以这样设置 `picker-options`:
```html
<el-date-picker
v-model="date"
type="date"
:picker-options="pickerOptions"
></el-date-picker>
```
```js
data() {
return {
date: '',
pickerOptions: {
selectableRange: date => {
if (date.getFullYear() === 2022 && date.getMonth() === 0 && date.getDate() === 1) {
return {
disabledDate: true,
select: true
}
} else {
return {
disabledDate: false
}
}
}
}
}
}
```
上面的代码中,我们设置了 `selectableRange` 属性为一个函数,该函数返回一个对象,其中包含 `disabledDate` 和 `select` 两个属性。在这个例子中,我们设置了 2022 年 1 月 1 日为默认选中的日期,并且禁用了该日期之外的所有日期。你可以根据自己的需求进行相应的修改。
阅读全文