今天接了個(gè)需求，要求 如下：

• 開始時(shí)間
  • 大于等于當(dāng)前時(shí)間 也就是大于等于今天
  • 小于等于結(jié)束時(shí)間
• 結(jié)束時(shí)間
  • 大于等于當(dāng)前時(shí)間 也就是大于等于今天
  • 大于等于開始時(shí)間

效果圖如下：

element日期選擇.gif

話不多說(shuō)，直接上代碼

<template>
  <div class="hello">
    <el-form
      :model="basicInfo"
      size="mini"
      label-width="100px"
    >
      <el-row>
        <!--開始時(shí)間-->
        <el-col :span="12">
          <el-form-item
            label="開始時(shí)間："
            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="選擇開始時(shí)間"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!--結(jié)束時(shí)間-->
        <el-col :span="12">
          <el-form-item
            label="結(jié)束時(shí)間："
            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="選擇結(jié)束時(shí)間"
              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: {
        // 創(chuàng)建時(shí)間 此時(shí)間可以通過(guò)后端接口取服務(wù)器時(shí)間 或者 用 new Date().getTime()
        createDate: new Date().getTime(),
        startDate: '', // 開始時(shí)間
        endDate: '', // 結(jié)束時(shí)間
      },
      // 開始時(shí)間限制
      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;
        },
      },
      // 結(jié)束時(shí)間限制
      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>