日期输入框 年月日联动

<template>
  <div>
    <el-form inline label-width="80px">
      <el-form-item label="年" prop="year">
        <el-select v-model="param.year">
          <el-option
              v-for="(item, index) in [new Date().getFullYear() - 2, new Date().getFullYear() - 1, new Date().getFullYear()]"
              :label="item" :value="item" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月" prop="month">
        <el-select v-model="param.month">
          <el-option v-for="item in 12" :label="formDate(item)" :value="formDate(item)" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日" prop="day">
        <el-select v-model="param.day">
          <el-option v-for="item in (isStringNotEmpty(param.year) && isStringNotEmpty(param.month))
          ? new Date(param.year, param.month, 0).getDate()
          : 31"
                     :label="formDate(item)" :value="formDate(item)" :key="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "dateOptions",
  data() {
    return {
      param: {
        year: null,
        month: null,
        day: null,
      }
    }
  },
  watch: {
    'param.month'(newValue) {
      if (this.isStringNotEmpty(newValue) && this.isStringNotEmpty(this.param.day)) {
        let monthMaxDayNumber = new Date(this.param.year, this.param.month, 0).getDate()
        this.param.day = this.param.day > monthMaxDayNumber ? monthMaxDayNumber : this.param.day
      }
    }
  },
  methods: {
    formDate(date) {
      return date < 10 ? '0' + date : date;
    },
    isStringNotEmpty(str) {
      return str != undefined && str != null && str != ''
    }
  }
}
</script>

<style scoped>

</style>