【避坑指“难”】DateTimePicker 日期时间选择器:结束时间不能小于开始时间

207 阅读1分钟

选择开始时间: 在这里插入图片描述 选择结束时间: 在这里插入图片描述

DateTimePicker 组件:


```typescript
 <template v-slot:start_time="{ form, formItemKey }">
          <el-date-picker
            v-model="form[formItemKey]"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsStart"
            @change="startTimeStatus($event)"
            default-time="00:00:00"
            style="width:270px"
          ></el-date-picker>
        </template>
        <template v-slot:end_time="{ form, formItemKey }">
          <el-date-picker
            v-model="form[formItemKey]"
            type="datetime"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsEnd"
            @change="endTimeStatus($event)"
            default-time="23:59:59"
            style="width:270px"
          ></el-date-picker>
</template>

```typescript
 	  pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.end_time
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
     pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.start_time
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime()
          }
        }
      },
 	startTimeStatus(event) {
      this.start_time = event
    },
    endTimeStatus(event) {
      this.end_time = event
    },