两个日期框选择

一、快捷键选择

.el-input {
  width: 30%;
  margin-right: 20px;
}

<div id="page">
	<!--下面的html定义标签部分写在这里-->
</div>

new Vue({
	el:'#page',//选择元素，通常都是id
	data: 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、情景一

1. 结束日期不能大于开始日期,可以为今天
2. 注: 结束时间最大只能为今天，开始时间只能小于或等于结束时间，
3. 如果开始时间为今天，结束时间只能为今天
   
   

<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、情景二

1. 结束日期不能大于开始日期,可以为今天
2. 先开始时间，判断为今天或以前，在结束时间，则结束时间大于等于开始时间
3. 先结束时间，判断为今天或以后，在开始时间，则开始时间小于等于结束时间
   
   

<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、情景三

1. 限制结束日期不能小于开始日期
   

<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、情景四

1. 限制选择开始时间不能小于当前时间(包含当前时间)。
2. 并且结束时间不能小于开始时间（比上面多了层限时）
   

<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
		}
	}
},