样式效果:
当开始时间选择了之后,再去选择结束时间,在结束时间表单项中,开始时间之前的日期是置灰不可以选择的。
代码样例:
若有些属性不理解,可参考官网说明时间选择器组件介绍
<el-form :model="createForm" ref="ruleForm" :rules="rules">
<el-form-item
label="规则时间"
width="400"
label-width="72px"
style="margin-bottom: 0px;"
>
<el-form-item
:prop="`tipMessageDates`"
:rules="rules.tipMessageRuleDates"
>
<el-date-picker
v-model="tipMessageDates.startDate"
type="date"
:picker-options="startPickerOptions"
@focus="onFocus(tipMessageDates)"
value-format="yyyy-MM-dd"
placeholder="开始时间"
>
</el-date-picker
><span style="margin: 0 10px;">至</span>
<el-date-picker
v-model="tipMessageDates.endDate"
type="date"
:picker-options="endPickerOptions"
@focus="onFocus(tipMessageDates)"
value-format="yyyy-MM-dd"
placeholder="结束时间"
>
</el-date-picker>
</el-form-item>
</div>
</el-form-item>
</el-form>
data(){
return {
endPickerOptions: any = this.processDate() // 结束时间置灰
startPickerOptions: any = this.beginDate() // 开始时间置灰
nowDate: any = null // 当前选择的时间
}
}
methods:{
// 时间输入被点击
onFocus(data: any) {
this.nowDate = data
}
// 开始时间置灰
beginDate() {
let self: any = this
return {
disabledDate(time: any) {
if (self.nowDate.endDate) {
return new Date(self.nowDate.endDate).getTime() < time.getTime()
} else {
return false
}
}
}
}
// 结束时间置灰
processDate() {
let self: any = this
return {
disabledDate(time: any) {
if (self.nowDate.startDate) {
return (
new Date(self.nowDate.startDate).getTime() - 8.64e7 > time.getTime()
)
} else {
return false
}
}
}
}
}