elementui 日期选择器的选择日期范围,初始值为今天到今天
时间: 2024-02-24 20:56:54 浏览: 87
可以使用 ElementUI 的日期选择器(DatePicker)和时间选择器(TimePicker)结合使用来实现选择日期范围,并且可以设置初始值为今天到今天。具体实现方法如下:
1. 使用 DatePicker 组件选择日期,并设置其 value 属性为当前日期,即:
```
<el-date-picker v-model="startDate" :value="new Date()" type="date"></el-date-picker>
```
2. 使用 DatePicker 组件选择结束日期,并设置其 value 属性为当前日期,即:
```
<el-date-picker v-model="endDate" :value="new Date()" type="date"></el-date-picker>
```
3. 设置 DatePicker 组件的 picker-options 属性,用于设置可选择的日期范围,即:
```
<el-date-picker v-model="startDate" :value="new Date()" type="date" :picker-options="pickerOptions"></el-date-picker>
```
其中,pickerOptions 是一个对象,包含了可选择的日期范围,具体设置如下:
```
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
```
这里的 disabledDate 属性表示禁用日期的方法,这里设置了只能选择今天及之前的日期。
完整代码示例:
```
<template>
<div>
<el-date-picker v-model="startDate" :value="new Date()" type="date" :picker-options="pickerOptions"></el-date-picker>
<span>~</span>
<el-date-picker v-model="endDate" :value="new Date()" type="date" :picker-options="pickerOptions"></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
}
}
}
}
</script>
```
以上代码实现了一个选择日期范围的组件,初始值为今天到今天。
阅读全文