项目中经常在表单里有开始时间和结束时间俩个选择框,但要对时间进行控制,开始时间不大于结束时间 结束时间不小于开始时间
<el-form ref="form" :model="form" :rules="formRules">
<el-row>
<el-col :span="9">
<el-form-item prop="startTime" label="项目开始时间">
<el-date-picker
v-model="form.startTime"
value-format = "yyy-MM-dd"
type="date"
:picker-options ="startDatePicker"
placeholder="选择开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col : span="9">
<el-form-item prop="overTime" label="项目开始时间">
<el-date-picker
v-model="form.overTime"
value-format = "yyy-MM-dd"
type="date"
:picker-options ="overDatePicker"
placeholder="选择结束时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
2.data
data() {
return {
startDatePicker: {
disabledDate: time =>{
if(this.form.overTime) {
return time.getTime() >new Date(this.form.overTime)
}
}
},
overDatePicker: {
disabledDate: time =>{
if(this.form.startTime) {
return time.getTime() < new Date(this.form.startTime) - 1000*3600*24
}
}
},
}
}
3.去除日期时间选择器里的此刻按钮,给 el-date-picker 标签定义一个 class属性
重点: class="date_picker"
在样式里面写入
<style>
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
display: none;
}
</style>
切记: 重启项目就可以去除此刻按钮!