一、时分秒
开始时间小于结束时间,结束时间大于开始时间
<el-time-picker
v-model="dataForm.startTime"
placeholder="请选择时间"
value-format='HH:mm:ss'
:picker-options="{
selectableRange:`00:00:00 -${dataForm.endTime ? dataForm.endTime+':00' : '23:59:00'}`
}"
></el-time-picker>
-
<el-time-picker
v-model="dataForm.endTime"
placeholder="请选择时间"
value-format='HH:mm:ss'
:picker-options="{
selectableRange:`${dataForm.startTime ? dataForm.startTime+':00' : '00:00:00'}-23:59:00`
}"
></el-time-picker>
效果如下
二、年月日
限制开始时间大于当前时间、小于结束时间,结束时间大于开始时间
<el-form-item label="日期" required>
<el-col :span="11">
<el-form-item prop="effectiveStartTime">
<el-date-picker
v-model="dataForm.effectiveStartTime"
type="date"
:picker-options="pickerOptions1"
style="width: 100%;"
placeholder="选择时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col style="text-align: center;" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="effectiveEndTime">
<el-date-picker
v-model="dataForm.effectiveEndTime"
type="date"
:picker-options="pickerOptions2"
style="width: 100%;"
placeholder="选择时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
pickerOptions1:{ //起始日期——不可选
disabledDate:(time)=>{
if(this.dataForm.effectiveEndTime){
return (time.getTime() < Date.now()-8.64e7) || (time.getTime() > new Date(this.dataForm.effectiveEndTime).getTime())
}else{
return time.getTime() < Date.now()-8.64e7;
}
}
},
pickerOptions2:{ //结束日期——不可选
disabledDate:(time)=>{
return time.getTime() < new Date(this.dataForm.effectiveStartTime).getTime();
}
},
效果如下:
三、只能选择当月且小于当天
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e7 || time.getMonth() != new Date().getMonth()
}
},
效果如下: