今天接了个需求，要求 如下：

• 开始时间
  • 大于等于当前时间 也就是大于等于今天
  • 小于等于结束时间
• 结束时间
  • 大于等于当前时间 也就是大于等于今天
  • 大于等于开始时间

效果图如下：

element日期选择.gif

话不多说，直接上代码

<template>
  <div class="hello">
    <el-form
      :model="basicInfo"
      size="mini"
      label-width="100px"
    >
      <el-row>
        <!--开始时间-->
        <el-col :span="12">
          <el-form-item
            label="开始时间："
            prop="startDate"
          >
            <el-date-picker
              v-model="basicInfo.startDate"
              type="date"
              :picker-options="pickerOptionsStart"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始时间"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!--结束时间-->
        <el-col :span="12">
          <el-form-item
            label="结束时间："
            prop="endDate"
          >
            <el-date-picker
              v-model="basicInfo.endDate"
              type="date"
              :picker-options="pickerOptionsEnd"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束时间"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      basicInfo: {
        // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime()
        createDate: new Date().getTime(),
        startDate: '', // 开始时间
        endDate: '', // 结束时间
      },
      // 开始时间限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.basicInfo.endDate) {
            // eslint-disable-next-line max-len
            return time.getTime() > new Date(this.basicInfo.endDate).getTime() || time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
          }
          return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
        },
      },
      // 结束时间限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.basicInfo.startDate) {
            return time.getTime() < new Date(this.basicInfo.startDate).getTime();
          }
          return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
        },
      },
    };
  },
  mounted() {

  },
  beforeDestroy() {
  },
  methods: {

  },
};
</script>