psychic_camera_school/src/components/DateSelect.vue

<!-- 日期搜索框 -->
<template>
  <div id="myDate">
    <!-- :popper-append-to-body="false" -->
    <!-- <el-button icon="el-icon-caret-left" @click="dateChange(4)"></el-button> -->
    <el-select :popper-append-to-body="true" 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 :popper-append-to-body="true" 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 :popper-append-to-body="true" 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>
import autofit from 'autofit.js'

export default {
  name: "DateSelect",
  props: ["yearsModelPrants"],
  data() {
    return {
      yearsModel: null,
      years: [],
      monthsModel: null,
      months: [],
      daysModel: null,
      days: [],
      nowYear: null,
      nowMonth: null,
      nowDay: null,
    };
  },

  created() {
    this.init();
    // try {
    //   // this.yearsModel = this.yearsModelPrants.substring(0, 4);
    //   // this.monthsModel = this.yearsModelPrants.substring(5, 7);
    //   // this.daysModel = this.yearsModelPrants.substring(8, 10);
    //   this.yearsModel = null;
    //   this.monthsModel = null;
    //   this.daysModel = null;
    // } catch (error) {
    //   this.yearsModelPrants = "";
    // }
  },
  mounted() {
    autofit.init({
      ignore: [
        {
          // dom: "#myDate", //必填
          // height: 300,//可选，写数字即可（px）
          // width: 300,//可选，写数字即可（px）
          // scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
          // fontSize: 26 //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
        },]
    })

    if (this.yearsModelPrants && this.yearsModelPrants != '') {
      this.yearsModel = Number(this.yearsModelPrants.split("-")[0]);
      this.monthsModel = this.yearsModelPrants.split("-")[1];
      this.daysModel = this.yearsModelPrants.split("-")[2];
    }
    // else {
    //     this.yearsModelPrants = "";
    //     this.yearsModel = null;
    //     this.monthsModel = null;
    //     this.daysModel = null;
    // }

  },
  methods: {
    setDateNull() {
      this.yearsModel = null;
      this.monthsModel = null;
      this.daysModel = null;

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

      this.nowYear = myDate.getFullYear(); //获取当前年
      this.nowMonth = myDate.getMonth() + 1; //获取当前月
      this.nowDay = myDate.getDate(); //获取当前日

      this.initSelectYear(year);
      this.initSelectMonth();
      this.initSelectDay(year, month);

      // this.yearsModel = this.yearsModelPrants || year;
      // this.monthsModel = month < 10 ? `0${month}` : month;
      // this.daysModel = day < 10 ? `0${day}` : day;
      // let obj = {
      //   year: this.yearsModel,
      //   month: this.monthsModel,
      //   day: this.daysModel,
      // };
      //this.$emit("dateChange", obj);
    },
    initSelectYear(year) {
      this.years = [];
      for (let i = 0; i < 100; i++) {
        this.years.push({ value: year - i, label: year - i + "年" });
      }
    },
    initSelectMonth() {
      this.months = [];
      // this.months.push({ value: 0, label: "全部" });
      let m = "";
      // for (let i = 1; i <= 12; i++) {
      //   m = i < 10 ? `0${i}` : i;
      //   this.months.push({ value: m, label: m + "月" });
      // }

      if (this.yearsModel == this.nowYear) {
        for (let i = 1; i <= this.nowMonth; i++) {
          m = i < 10 ? `0${i}` : `${i}`;
          this.months.push({ value: m, label: m + "月" });
        }
      } else {
        for (let i = 1; i <= 12; i++) {
          m = i < 10 ? `0${i}` : `${i}`;
          this.months.push({ value: m, label: m + "月" });
        }
      }


    },
    initSelectDay(year, month) {
      var maxDay = this.getMaxDay(year, month);
      this.days = [];
      // this.days.push({ value: 0, label: "全部" });
      let d = "";
      // for (var i = 1; i <= maxDay; i++) {
      //   d = i < 10 ? `0${i}` : i;
      //   this.days.push({ value: d, label: d + "日" });
      // }

      if (this.yearsModel == this.nowYear && this.monthsModel == this.nowMonth) {
        for (var i = 1; i <= this.nowDay; i++) {
          d = i < 10 ? `0${i}` : `${i}`;
          this.days.push({ value: d, label: d + "日" });
        }
      } else {
        for (var i = 1; i <= maxDay; i++) {
          d = i < 10 ? `0${i}` : `${i}`;
          this.days.push({ value: d, label: d + "日" });
        }
      }

    },
    dateChange(type) {
      console.log(':popper-append-to-body="false"');

      //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 == 1) {
        if (this.monthsModel == 0) {
          this.daysModel = 0;
          this.initSelectMonth();
          this.initSelectDay(this.yearsModel, 1);
        } else {
          if (this.yearsModel == this.nowYear) {
            this.monthsModel = null;
            this.daysModel = null;
            this.initSelectMonth();
            this.initSelectDay(this.yearsModel, 1);
          } else {
            this.initSelectMonth();
            this.initSelectDay(this.yearsModel, this.monthsModel);
          }

        }
      }
      if (type == 2) {
        if (this.monthsModel == 0) {
          this.daysModel = 0;
          this.initSelectDay(this.yearsModel, 1);
        } else {
          if (this.yearsModel == this.nowYear && this.monthsModel == this.nowMonth) {
            this.daysModel = null;
            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.$emit("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>
<style scoped="scoped">
#myDate {
  display: flex;
  flex-direction: row;
  justify-content: start;
}

#myDate /deep/ .el-select {
  margin-left: 5px;
}
</style>