vue $1-3——ElementUI的时间选择器（DatePicker）+开始时间到结束时间

先上实现的效果

<template>
<div class="content">
<div class="search-bar" ref="searchBar">
<el-form class="search-onlyline" :inline="true">
<el-form-item label="开始时间:">
<el-date-picker v-model="createDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="startTimeStatus" style="margin-right: 10px;" :picker-options="pickerOptionsStart"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间:">
<el-date-picker v-model="overDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" @change="endTimeStatus" style="margin-left: 10px;" :picker-options="pickerOptionsEnd"></el-date-picker>
</el-form-item>
<el-button type="primary" @click="datasearch">搜索</el-button>
</el-form>
</div>
</div>
</template>

<script>
export default {
data() {
createDate: "", //开始日期
overDate: "", //结束日期
// 设置日期的开始时间范围
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.overDate;
if (endDateVal) {
return time.getTime() > new Date(endDateVal).getTime();
}
}
},
//设置日期的结束时间范围不能超过开始时间
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.createDate;
if (beginDateVal) {
return time.getTime() < new Date(beginDateVal).getTime();
}
}
}
},
methods: {
datasearch() {
console.log(this.createDate);//获取到你所选择的开始时间
console.log(this.overDate);//获取到你所选择的开始时间
},
};
</script>

<style scoped>
//引入你需要的css样式，一般像elementUI的样式大小颜色直接用封装好的就可以
</style>

解释一下elementUI------DatePicker 日期选择器 属性值的意义和用法，便于更好理解

v-model=“createDate” 属性绑定，在data中写为空即可，

type=‘datetime’ 显示类型的，具体有可参考api，date是只显示日期，datetime是日期+时间

value-format=‘yyyy-MM-dd HH:mm:ss’ 绑定值的格式。不指定则绑定值为 Date 对象

placeholder=‘选择日期时间’ 输入框占位文本

@change=‘startTimeStatus’ 在 Input 值改变时触发

style='margin-right: 10px 样式

:picker-options=‘pickerOptionsStart’ 设置日期选择范围