关于elementUI日期选择器时间的禁用

“我正在参加「掘金·启航计划」”

前言

在使用有开始时间和结束时间分开的组件时，往往需要判断开始时间不能大于结束时间（抑或结束时间不能小于开始时间），最直接了当的做法就是对相关组件进行时间上的禁用，以避免问题的出现。

<template>
  <div class="my-date-picker">
    <el-date-picker v-model="currStartDate" type="date" placeholder="请选择开始日期" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" />
    <el-date-picker v-model="currEndDate" type="date" placeholder="请选择结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" />
  </div>
</template>

<script>
export default {
  name: 'MyDatePicker',
  data() {
    return {
      currStartDate: '',
      currEndDate: '',
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.currStartDate) {
            return (
              time.getTime() >= new Date(this.currEndDate).getTime()
            )
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.currEndDate) {
            return (
              time.getTime() <= new Date(this.currStartDate).getTime() - 8.64e7  // 8.64e7为一天的毫秒数  - 8.64e7 表示可选择当天时间
            )
          }
        }
      }
    }
  },
  methods: {
  }
}
</script>