<template>
  <el-form
        :inline="true"
        :model="taskData"
        size="mini"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="开始日期:">
              <el-date-picker
                v-model="taskData.startDate"
                class="date"
                type="date"
                placeholder="选择日期"
                :picker-options="startDate"
                format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="完成日期:">
              <el-date-picker
                v-model="taskData.endDate"
                :disabled="!taskData.startDate"
                :picker-options="endDate"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
</template>

<script>
export default {
  data() {
    return {
      taskData: {
        startDate: '', // 开始日期
        endDate: '', // 完成日期
      },
      startDate: {
        disabledDate: date => {
          return date.getTime() < Date.now() - 24 * 60 * 60 * 1000 // 禁用以前的日期，今天不禁用
          // return date.getTime() <= Date.now();    //禁用今天以及以前的日期
        }
      },
      endDate: {
        disabledDate: date => {
          const limitDate = new Date(this.taskData.startDate).getTime() + 24 * 60 * 60 * 1000 // 禁用开始以前的时间 包含当天
          if (limitDate) return date.getTime() < limitDate - 0
        }
      }
    }
  }
}
</script>