DatePicker 日期选择器: Element官网地址
在日常开发中，我们会遇到一些情况，限制日期的范围的选择（例如：货物的起运时间，你限制不能选择今天之前的时间）
一、单个日期控制
代码：
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
限制不能选择今天之前的日期（可选今天的日期）
<script>
export default {
data (){
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
}
</script>
限制不能选择今天之前的日期（不能选今天的日期）
<script>
export default {
data (){
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now()
}
},
}
}
}
</script>
二、两个日期联动控制
前提条件：
1、当天日期为：2019-10-24
2、两个日期选择框：起运时间、送达时间
限制情况：
1、起运时间、送达时间都不能选择今天之前的日期（即：2019-10-24至今后）
2、若起运时间选择了2019-10-25,送达时间便不能选择2019-10-25之前的日期（即：2019-10-25至今后）
3、若送达时间选择了2019-10-26,起运时间时间便不能选择今天之前的日期，且不能选择2019-10-26之后的日期（即：2019-10-24至2019-10-26）
代码：
<el-date-picker
v-model="value"
type="dateStart"
placeholder="选择起运日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
<el-date-picker
v-model="value"
type="dateEnd"
placeholder="选择送达日期"
:picker-options="pickerOptionsEnd">
</el-date-picker>
<script>
export default {
data (){
return {
dateStart:'', // 起运日期
dateEnd:'', // 送达日期
pickerOptionsStart: {
disabledDate(time) {
if (this.dateEnd) {
var endTime = new Date(this.dateEnd).valueOf();
}
var startTime = Date.now() - 8.64e7;
return time && (time.valueOf() < startTime) || time.valueOf() > endTime
}
},
pickerOptionsEnd: {
disabledDate(time) {
if (this.dateStart) {
// 让用户可以选择开始结束同一天
var startTime = new Date(this.dateStart).valueOf() - 8.64e7 + 1;
} else {
var startTime = Date.now() - 8.64e7;
}
return time && time.valueOf() < startTime
}
},
}
}
}
</script>
