elementui 选择一段时间
时间: 2023-09-07 07:11:20 浏览: 35
对于elementui选择一段时间,可以使用el-date-picker组件的type属性设置为"daterange",然后通过设置start-placeholder和end-placeholder属性来显示开始时间和结束时间的占位符。同时,可以使用value属性绑定一个数组来获取选择的时间段。在data中定义dateTimes数组来接收选择的时间段。在methods中使用disabledDate方法来禁用不在指定时间范围内的日期。具体代码如下:
```html
<template>
<el-date-picker
v-model="dateTimes"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
dateTimes: [], // 时间段
pickerOptions: {
disabledDate: this.disabledDate, // 禁用不在指定时间范围内的日期
},
};
},
methods: {
disabledDate(time) {
return (
time.getTime() > new Date(this.endTime).getTime() ||
time.getTime() < new Date(this.starTime).getTime()
);
},
},
};
</script>
```
其中,dateTimes是接收选择的时间段的数组,pickerOptions中的disabledDate方法用于禁用不在指定时间范围内的日期。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [vue elementui el-date-picker 根据接口返回的时间设置可选择的时间段](https://blog.csdn.net/qq_33164351/article/details/115664611)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]