elementUI-日期选择器（两个框 限制选择范围、快捷键选择）
两个日期框选择一、快捷键选择二、示例1、情景一2、情景二3、情景三3、情景四两个日期框选择
一、快捷键选择
.el-input {width: 30%;margin-right: 20px;}
<div id="page"><!--下面的html定义标签部分写在这里--></div>
new Vue({el:'#page',//选择元素，通常都是iddata: function() {return {//定义的变量value1: '',value2: '',//注意：-----下面的javascript部分的代码放在这里}},})
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);}}, {text: '最近一个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);}}, {text: '最近三个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', [start, end]);}}]},
二、示例
1、情景一
结束日期不能大于开始日期,可以为今天注: 结束时间最大只能为今天，开始时间只能小于或等于结束时间，如果开始时间为今天，结束时间只能为今天<div style="display: flex;"><el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"></el-date-picker><el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions1"></el-date-picker></div>
pickerOptions0: {disabledDate: (time) => {if (this.value2) {return time.getTime() > Date.now() || time.getTime() > this.value2;} else {return time.getTime() > Date.now();}}},pickerOptions1: {disabledDate: (time) => {return time.getTime() < this.value1 || time.getTime() > Date.now();}},
2、情景二
结束日期不能大于开始日期,可以为今天先开始时间，判断为今天或以前，在结束时间，则结束时间大于等于开始时间先结束时间，判断为今天或以后，在开始时间，则开始时间小于等于结束时间<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions2"></el-date-picker><el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions3"></el-date-picker>
pickerOptions2: {disabledDate: (time) => {if (this.value2) {return time.getTime() > this.value2} else {return time.getTime() > Date.now()}}},pickerOptions3: {disabledDate: (time) => {if (this.value2) {return time.getTime() < this.value1}return time.getTime() < Date.now() - 8.64e7}},
3、情景三
限制结束日期不能小于开始日期<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions4"></el-date-picker><el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions5"></el-date-picker>
pickerOptions4: {disabledDate: (time) => {if (this.value2 != "") {return time.getTime() > new Date(this.value2).getTime();}}},pickerOptions5: {disabledDate: (time) => {// - 1 * 24 * 60 * 60 * 1000//减去一天的时间代表可以选择同一天;return time.getTime() < new Date(this.value1).getTime();}},
3、情景四
限制选择开始时间不能小于当前时间(包含当前时间)。并且结束时间不能小于开始时间（比上面多了层限时）<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions6"></el-date-picker><el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions7"></el-date-picker>
pickerOptions6: {//结束时间不能大于开始时间disabledDate: (time) => {if (this.value2) {return time.getTime() > new Date(this.value2).getTime();} else {//还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天return time.getTime() < Date.now() - 8.64e7}}},pickerOptions7: {disabledDate: (time) => {if (this.value1) {// - 1 * 24 * 60 * 60 * 1000//可以选择同一天return time.getTime() < new Date(this.value1).getTime();} else {//还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天return time.getTime() < Date.now() - 8.64e7}}},
