el-elementUI使用el-date-picker,选择多个年
时间: 2023-10-14 18:04:48 浏览: 215
【JavaScript源代码】vue el-date-picker动态限制时间范围案例详解.docx
el-date-picker 只能选择一个日期,如果需要选择多个日期,可以考虑使用 el-date-range-picker。
el-date-range-picker 是一个日期范围选择器,可以选择开始日期和结束日期,支持选择多个日期范围。
以下是一个基本的例子:
```html
<template>
<el-date-range-picker
v-model="dateRange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleChange"
/>
</template>
<script>
export default {
data() {
return {
dateRange: [] // 存储选择的日期范围
};
},
methods: {
handleChange(value) {
console.log('选择的日期范围:', value);
}
}
};
</script>
```
在上面的例子中,我们通过 `v-model` 双向绑定了选择的日期范围,并在 `@change` 事件中输出选择的日期范围。`range-separator` 属性可以设置日期范围的分隔符,`start-placeholder` 和 `end-placeholder` 属性可以设置开始日期和结束日期的占位符。
阅读全文