elementui 日期选择器选择时间范围,初始值为今天
时间: 2023-10-17 07:16:24 浏览: 160
可以使用 ElementUI 的日期选择器(DatePicker)和时间选择器(TimePicker)结合使用来实现选择时间范围,并且可以设置初始值为今天。具体实现方法如下:
1. 使用 DatePicker 组件选择日期,并设置其 value 属性为当前日期,即:
```
<el-date-picker v-model="startDate" :value="new Date()" type="date"></el-date-picker>
```
2. 使用 TimePicker 组件选择时间,并设置其 value 属性为当前时间,即:
```
<el-time-picker v-model="startTime" :value="new Date()" format="HH:mm:ss"></el-time-picker>
```
其中,format 属性用于指定时间格式,HH 表示24小时制的小时,mm 表示分钟,ss 表示秒钟。
完整代码示例:
```
<template>
<div>
<el-date-picker v-model="startDate" :value="new Date()" type="date"></el-date-picker>
<el-time-picker v-model="startTime" :value="new Date()" format="HH:mm:ss"></el-time-picker>
<span>~</span>
<el-time-picker v-model="endTime" :value="new Date()" format="HH:mm:ss"></el-time-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: '',
startTime: '',
endTime: ''
}
}
}
</script>
```
以上代码实现了一个选择时间范围的组件,初始值为当前日期和时间。
阅读全文
相关推荐
















