在做项目的时候,经常会碰到开始时间和结束时间同时出现的问题,一般情况下,选定了开始时间,那么结束时间就不能小于开始时间,反之亦然。
element提供了一个日期选择器组件,可以根据自己想要的日期格式来自定义时间。
<el-form
ref="submitForm"
:model="submitForm"
class="form-item table"
label-width="120px"
label-position="left"
>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="submitForm.startTime"
type="date"
placeholder="请输入开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStart"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="submitForm.endTime"
type="date"
placeholder="请输入结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEnd"
></el-date-picker>
</el-form-item>
</el-form>
这里,绑定了使用:picker-options绑定一个变量,在用户选择的时候,自动校准。
完整代码:
<el-form
ref="submitForm"
:model="submitForm"
class="form-item table"
label-width="120px"
label-position="left"
>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
v-model="submitForm.startTime"
type="date"
placeholder="请输入开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsStart"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
v-model="submitForm.endTime"
type="date"
placeholder="请输入结束时间"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptionsEnd"
></el-date-picker>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: time => {
if (this.submitForm.endTime) {
return (
time.getTime() >= new Date(this.submitForm.endTime).getTime()
);
}
}
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: time => {
if (this.submitForm.startTime) {
return (
time.getTime() <= new Date(this.submitForm.startTime).getTime()
);
}
}
},
submitForm: {
startTime: '',
endTime: ''
}
}
}
}
</script>