html:
<li>
<span>到达时间:</span>
<el-date-picker
v-model="arr_time"
type="datetime"
style="width: 15vw;"
size="small"
:picker-options="startDatePicker"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</li>
<li>
<span>结束时间:</span>
<el-date-picker
v-model="leave_time"
type="datetime"
size="small"
style="width: 15vw;"
:picker-options="endDatePicker"
default-time="14:00:00"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</li>
data方法设置startDatePicker,endDatePicker:
data(){
return{
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
arr_time:this.getTime(),//开始时间获取现在的时间
}
js
//这里是控制结束日期不能小于开始日期
beginDate(){
const self = this
return {
disabledDate(time){
if (self.leave_time) { //如果结束时间不为空,则小于结束时间
return new Date(self.leave_time).getTime() < time.getTime()
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
}
}
},
processDate() {
const self = this
return {
disabledDate(time) {
if (self.arr_time) { //如果开始时间不为空,则结束时间大于开始时间
return new Date(self.arr_time).getTime() > time.getTime()
} else {
// return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
}
}
}
},
//获取现在的时间
getTime(){
var _this = this;
let yy = new Date().getFullYear();
let mm = new Date().getMonth()+1;
let dd = new Date().getDate();
let hh = new Date().getHours();
let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
let time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
return time
},
结束时间可以等于或者大于开始时间
<el-form-item label="抵达时间" prop="arr_time">
<el-date-picker
v-model="form.arr_time"
type="datetime"
style="width:100%"
placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStart"
@change="getroomTypeList,getDays()"
/>
</el-form-item>
<el-form-item label="离开时间" prop="leave_time">
<el-date-picker
v-model="form.leave_time"
type="datetime"
style="width:100%"
placeholder="选择日期时间"
:picker-options="pickerOptionsEnd"
value-format="yyyy-MM-dd HH:mm:ss"
@change="getroomTypeList(),getDays()"
/>
</el-form-item>
data(){
return{
pickerOptionsStart: {
disabledDate: time => {
const delay = this.form.leave_time
if (delay) {
return time.getTime() < new Date(delay).getTime() - 24 * 60 * 60 * 1000 // 当天也可以
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
const delay = this.form.arr_time
if (delay) {
// const dd = new Date('2019-09-03').getTime();//9月3号
// return time.getTime() < dd;
return time.getTime() < new Date(delay).getTime() - 24 * 60 * 60 * 1000 // 当天也可以
}
}
} // 结束时间
}
}