vue日期选择 关联

转载自https://blog.csdn.net/qq_34783476/article/details/90774635

<!-- 日期搜索框 -->
<template>
  <div id="myDate">
    <el-button icon="el-icon-caret-left" @click="dateChange(4)"></el-button>
    <el-select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择" style="width:100px;">
      <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="monthsModel" @change="dateChange(2)" placeholder="请选择" style="width:100px;">
      <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="daysModel" @change="dateChange(3)" placeholder="请选择" style="width:100px;">
      <el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-button icon="el-icon-caret-right" @click="dateChange(5)"></el-button>

  </div>
</template>
 
<script>
export default {
  props: {
  },
  data() {
    return {
      yearsModel: null,
      years: [],
      monthsModel: null,
      months: [],
      daysModel: null,
      days: [],
    }
  },

  created() {
    this.init();
  },
  methods: {
    init() {
      var myDate = new Date;
      var year = myDate.getFullYear();//获取当前年
      var month = myDate.getMonth() + 1;//获取当前月
      var day = myDate.getDate();//获取当前日

      this.initSelectYear(year)
      this.initSelectMonth();
      this.initSelectDay(year, month);
      this.yearsModel = year;
      this.monthsModel = month;
      this.daysModel = day;
      let obj = { year: this.yearsModel, month: this.monthsModel, day: this.daysModel }
      this.$parent.dateChange(obj);
    },
    initSelectYear(year) {
      this.years = [];
      for (let i = 0; i < 30; i++) {
        this.years.push({ value: (year - i), label: (year - i) + "年" });
      }
    },
    initSelectMonth() {
      this.months = [];
      this.months.push({ value: 0, label: "全部" });
      for (let i = 1; i <= 12; i++) {
        this.months.push({ value: i, label: i + "月" });
      }
    },
    initSelectDay(year, month) {
      var maxDay = this.getMaxDay(year, month);
      this.days = [];
      this.days.push({ value: 0, label: "全部" });
      for (var i = 1; i <= maxDay; i++) {
        this.days.push({ value: i, label: i + "日" });
      }
    },
    dateChange(type) {
      //1年 2月 3日 4 左 5右
      if (type == 1 || type == 2) {
        if (this.monthsModel == 0) {
          this.daysModel = 0;
          this.initSelectDay(this.yearsModel, 1);
        } else {
          this.initSelectDay(this.yearsModel, this.monthsModel);
        }
      }
      if (type == 4) {
        this.dayleft();
      }
      if (type == 5) {
        this.dayright();
      }

      //操作父组件方法
      let obj = { year: this.yearsModel, month: this.monthsModel, day: this.daysModel }
      this.$parent.dateChange(obj);

    },
    dayleft() {

      var tmpYear = this.yearsModel;
      var tmpMonth = this.monthsModel;
      var tmpDay = this.daysModel;
      if (tmpYear == null) {
        var myDate = new Date;
        var year = myDate.getFullYear();//获取当前年
        var month = myDate.getMonth() + 1;//获取当前月
        var day = myDate.getDate();//获取当前日
        this.yearsModel = year;
        this.monthsModel = month;
        this.daysModel = day;
        return;
      }
      if (tmpMonth == null) { tmpMonth = 0 }
      if (tmpDay == null) { tmpDay = 0 }

      var yearV = tmpYear;
      var monthV = tmpMonth;
      var dayV = tmpDay;

      if ((tmpMonth == 0 || tmpMonth == 1) && (tmpDay == 0 || tmpDay == 1)) {
        yearV = tmpYear - 1; monthV = 12;
        dayV = this.getMaxDay(tmpYear, tmpMonth);
      }
      if (!(tmpMonth == 0 || tmpMonth == 1) && (tmpDay == 0 || tmpDay == 1)) {
        monthV = tmpMonth - 1;
        dayV = this.getMaxDay(tmpYear, tmpMonth);
      }
      if ((tmpMonth == 0 || tmpMonth == 1) && !(tmpDay == 0 || tmpDay == 1)) {
        dayV = tmpDay - 1;
      }
      if (!(tmpMonth == 0 || tmpMonth == 1) && !(tmpDay == 0 || tmpDay == 1)) {
        dayV = tmpDay - 1;
      }
      this.yearsModel = yearV;
      this.monthsModel = monthV;
      this.daysModel = dayV;
    },
    dayright() {

      var myDate = new Date;
      var year = myDate.getFullYear();//获取当前年
      var month = myDate.getMonth() + 1;//获取当前月
      var day = myDate.getDate();//获取当前日

      var tmpYear = this.yearsModel;
      var tmpMonth = this.monthsModel;
      var tmpDay = this.daysModel;

      if (tmpYear == null) {
        var myDate = new Date;
        var year = myDate.getFullYear();//获取当前年
        var month = myDate.getMonth() + 1;//获取当前月
        var day = myDate.getDate();//获取当前日
        this.yearsModel = year;
        this.monthsModel = month;
        this.daysModel = day;
        return;
      }

      if (tmpMonth == null) { tmpMonth = 0 }
      if (tmpDay == null) { tmpDay = 0 }
      if (tmpYear > year) {
        this.yearsModel = year;
        this.monthsModel = month;
        this.daysModel = day;
        return;
      }
      if (tmpYear == year) {
        if ((tmpMonth > month || tmpMonth == 0) || (tmpMonth == month) && (tmpDay >= day || tmpDay == 0)) {
          this.yearsModel = year;
          this.monthsModel = month;
          this.daysModel = day;
          return;
        }
      }

      var maxDay = this.getMaxDay(tmpYear, tmpMonth);
      var yearV = tmpYear;
      var monthV = tmpMonth;
      var dayV = tmpDay;

      if ((tmpMonth == 0 || tmpMonth == 12) && (tmpDay == 0 || tmpDay == maxDay)) {
        yearV = tmpYear + 1; monthV = 1;
        dayV = 1;
      }
      if (!(tmpMonth == 0 || tmpMonth == 12) && (tmpDay == 0 || tmpDay == maxDay)) {
        monthV = tmpMonth + 1;
        dayV = 1;
      }
      if (!(tmpMonth == 0 || tmpMonth == 12) && !(tmpDay == 0 || tmpDay == maxDay)) {
        dayV = tmpDay + 1;
      }

      this.yearsModel = yearV;
      this.monthsModel = monthV;
      this.daysModel = dayV;

    },
    getMaxDay(year, month) {
      var new_year = year;  //取当前的年份
      var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
      if (month > 12)      //如果当前大于12月，则年份转到下一年
      {
        new_month -= 12;    //月份减
        new_year++;      //年份增
      }
      var new_date = new Date(new_year, new_month, 1);//取当年当月中的第一天
      return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
    }
  }
}
</script>