一,元素书写
<el-date-picker
:picker-options="dataForm.pickerOptionsStart" //在data种添加了两个变量,通过:picker-options将其与组件进行绑定。
v-model="dataForm.startdate"
format="yyyy-MM-dd" value-format="yyyy-MM-dd" //这两个条件是控制显示的日期的,消除日期后面的一段字符串
align="right"
type="date"
placeholder="选择日期"
>
</el-date-picker>
<el-date-picker
:picker-options="dataForm.pickerOptionsEnd"
v-model="dataForm.enddate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
align="right"
type="date"
placeholder="选择日期"
>
</el-date-picker>
二,js部分。
data () {
return {
dataForm: {
// key: ''
startdate:'',
enddate:'',
pickerOptionsStart: {
disabledDate: time => {
if (this.dataForm.enddate) {
return time.getTime() > new Date(this.dataForm.enddate).getTime()
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.dataForm.startdate) {
return time.getTime() < new Date(this.dataForm.startdate).getTime() - 86400000
}
},
}
},
}
}