v3-lab-xcx/components/dengrq-datetime-picker/dateTimePicker/index.js

import CustomPickerView from '../customPickerView/index.vue';
import DateUtil from '../dateTimePicker/dateUtil';
import { DATE_TYPES } from './constant';

export default {
  components: {
    CustomPickerView
  },
  props: {
    // 日期模式，1：年月日（默认），2：年月，3：年份，4：年月日时分秒，5：时分秒，6：时分
    mode: {
      type: Number,
      default: DATE_TYPES.YMD
    },
    // 可选的最小日期，默认十年前
    minDate: {
      type: String,
      default: ''
    },
    // 可选的最大日期，默认十年后
    maxDate: {
      type: String,
      default: ''
    },
    // 默认选中日期（注意要跟日期模式对应）
    defaultDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectYear: new Date().getFullYear(),
      selectMonth: new Date().getMonth() + 1, // 选中的月份，1~12
      selectDay: new Date().getDate(),
      selectHour: new Date().getHours(),
      selectMinute: new Date().getMinutes(),
      selectSecond: new Date().getSeconds()
    };
  },
  watch: {
    defaultDate: {
      immediate: true,
      handler(val) {
        if (val) {
          if (this.mode == DATE_TYPES.YM && val.replace(/\-/g, '/').split('/').length == 2) {
            // 日期模式为年月时有可能传进来的defaultDate是2022-02这样的格式，在ios下new Date会报错，加上日期部分做兼容
            val += '-01';
          } else if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) {
            // 只有时分秒或者只有时分是不能调用new Date生成Date对象的，先加上一个假设的年月日（就取当年一月一日）来兼容
            const now = new Date();
            val = `${now.getFullYear()}-01-01 ${val}`;
          }

          let date = new Date(DateUtil.handleDateStr(val));
          this.selectYear = date.getFullYear();
          this.selectMonth = date.getMonth() + 1;
          this.selectDay = date.getDate();
          this.selectHour = date.getHours();
          this.selectMinute = date.getMinutes();
          this.selectSecond = date.getSeconds();
        }
      }
    }
  },
  computed: {
    minDateObj() {
      let minDate = this.minDate;
      if (minDate) {
        if (this.mode == DATE_TYPES.YM && minDate.replace(/\-/g, '/').split('/').length == 2) {
          // 日期模式为年月时有可能传进来的minDate是2022-02这样的格式，在ios下new Date会报错，加上日期部分做兼容
          minDate += '-01';
        } else if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) {
          // 只有时分秒或者只有时分是不能调用new Date生成Date对象的，先加上一个假设的年月日（就取当年一月一日）来兼容
          const now = new Date();
          minDate = `${now.getFullYear()}-01-01 ${minDate}`;
        }
        return new Date(DateUtil.handleDateStr(minDate));
      } else {
        // 没有传最小日期，默认十年前
        let year = new Date().getFullYear() - 10;
        minDate = new Date(year, 0, 1);
        return minDate;
      }
    },
    maxDateObj() {
      let maxDate = this.maxDate;
      if (maxDate) {
        if (this.mode == DATE_TYPES.YM && maxDate.replace(/\-/g, '/').split('/').length == 2) {
          // 日期模式为年月时有可能传进来的maxDate是2022-02这样的格式，在ios下new Date会报错，加上日期部分做兼容
          maxDate += '-01';
        } else if (this.mode == DATE_TYPES.HMS || this.mode == DATE_TYPES.HM) {
          // 只有时分秒或者只有时分是不能调用new Date生成Date对象的，先加上一个假设的年月日（就取当年一月一日）来兼容
          const now = new Date();
          maxDate = `${now.getFullYear()}-01-01 ${maxDate}`;
        }
        return new Date(DateUtil.handleDateStr(maxDate));
      } else {
        // 没有传最大日期，默认十年后
        let year = new Date().getFullYear() + 10;
        maxDate = new Date(year, 11, 31);
        return maxDate;
      }
    },
    years() {
      let years = [];
      let minYear = this.minDateObj.getFullYear();
      let maxYear = this.maxDateObj.getFullYear();
      for (let i = minYear; i <= maxYear; i++) {
        years.push(i);
      }

      return years;
    },
    months() {
      let months = [];
      let minMonth = 1;
      let maxMonth = 12;

      // 如果选中的年份刚好是最小可选日期的年份，那月份就要从最小日期的月份开始
      if (this.selectYear == this.minDateObj.getFullYear()) {
        minMonth = this.minDateObj.getMonth() + 1;
      }
      // 如果选中的年份刚好是最大可选日期的年份，那月份就要在最大日期的月份结束
      if (this.selectYear == this.maxDateObj.getFullYear()) {
        maxMonth = this.maxDateObj.getMonth() + 1;
      }

      for (let i = minMonth; i <= maxMonth; i++) {
        months.push(i);
      }

      return months;
    },
    days() {
      // 一年中12个月每个月的天数
      let monthDaysConfig = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      // 闰年2月有29天
      if (this.selectMonth == 2 && this.selectYear % 4 == 0) {
        monthDaysConfig[1] = 29;
      }

      let minDay = 1;
      let maxDay = monthDaysConfig[this.selectMonth - 1];

      if (this.selectYear == this.minDateObj.getFullYear() && this.selectMonth == this.minDateObj.getMonth() + 1) {
        minDay = this.minDateObj.getDate();
      }
      if (this.selectYear == this.maxDateObj.getFullYear() && this.selectMonth == this.maxDateObj.getMonth() + 1) {
        maxDay = this.maxDateObj.getDate();
      }

      let days = [];
      for (let i = minDay; i <= maxDay; i++) {
        days.push(i);
      }

      return days;
    },
    hours() {
      let hours = [];
      let minHour = 0;
      let maxHour = 23;

      if (
        this.selectYear == this.minDateObj.getFullYear() &&
        this.selectMonth == this.minDateObj.getMonth() + 1 &&
        this.selectDay == this.minDateObj.getDate()
      ) {
        minHour = this.minDateObj.getHours();
      }
      if (
        this.selectYear == this.maxDateObj.getFullYear() &&
        this.selectMonth == this.maxDateObj.getMonth() + 1 &&
        this.selectDay == this.maxDateObj.getDate()
      ) {
        maxHour = this.maxDateObj.getHours();
      }

      for (let i = minHour; i <= maxHour; i++) {
        hours.push(i);
      }

      return hours;
    },
    minutes() {
      let mins = [];
      let minMin = 0;
      let maxMin = 59;

      if (
        this.selectYear == this.minDateObj.getFullYear() &&
        this.selectMonth == this.minDateObj.getMonth() + 1 &&
        this.selectDay == this.minDateObj.getDate() &&
        this.selectHour == this.minDateObj.getHours()
      ) {
        minMin = this.minDateObj.getMinutes();
      }
      if (
        this.selectYear == this.maxDateObj.getFullYear() &&
        this.selectMonth == this.maxDateObj.getMonth() + 1 &&
        this.selectDay == this.maxDateObj.getDate() &&
        this.selectHour == this.maxDateObj.getHours()
      ) {
        maxMin = this.maxDateObj.getMinutes();
      }

      for (let i = minMin; i <= maxMin; i++) {
        mins.push(i);
      }

      return mins;
    },
    seconds() {
      let seconds = [];
      let minSecond = 0;
      let maxSecond = 59;

      if (
        this.selectYear == this.minDateObj.getFullYear() &&
        this.selectMonth == this.minDateObj.getMonth() + 1 &&
        this.selectDay == this.minDateObj.getDate() &&
        this.selectHour == this.minDateObj.getHours() &&
        this.selectMinute == this.minDateObj.getMinutes()
      ) {
        minSecond = this.minDateObj.getSeconds();
      }
      if (
        this.selectYear == this.maxDateObj.getFullYear() &&
        this.selectMonth == this.maxDateObj.getMonth() + 1 &&
        this.selectDay == this.maxDateObj.getDate() &&
        this.selectHour == this.maxDateObj.getHours() &&
        this.selectMinute == this.maxDateObj.getMinutes()
      ) {
        maxSecond = this.maxDateObj.getSeconds();
      }

      for (let i = minSecond; i <= maxSecond; i++) {
        seconds.push(i);
      }

      return seconds;
    },
    // 传给pickerView组件的数组，根据mode来生成不同的数据
    dateConfig() {
      let years = this.years.map((y) => y + '年');
      let months = this.months.map((m) => m + '月');
      let days = this.days.map((d) => d + '日');
      let hours = this.hours.map((h) => h + '时');
      let minutes = this.minutes.map((m) => m + '分');
      let seconds = this.seconds.map((s) => s + '秒');

      let ret = [];
      switch (this.mode) {
        case DATE_TYPES.YM:
          ret = [years, months];
          break;
        case DATE_TYPES.Y:
          ret = [years];
          break;
        case DATE_TYPES['YMD-HMS']:
          ret = [years, months, days, hours, minutes, seconds];
          break;
        case DATE_TYPES.HMS:
          ret = [hours, minutes, seconds];
          break;
        case DATE_TYPES.HM:
          ret = [hours, minutes];
          break;
        default:
          ret = [years, months, days];
          break;
      }

      return ret;
    },
    selectVals() {
      let ret = [];
      switch (this.mode) {
        case DATE_TYPES.YM:
          ret = [this.selectYear + '年', this.selectMonth + '月'];
          break;
        case DATE_TYPES.Y:
          ret = [this.selectYear + '年'];
          break;
        case DATE_TYPES['YMD-HMS']:
          ret = [
            this.selectYear + '年',
            this.selectMonth + '月',
            this.selectDay + '日',
            this.selectHour + '时',
            this.selectMinute + '分',
            this.selectSecond + '秒'
          ];
          break;
        case DATE_TYPES.HMS:
          ret = [this.selectHour + '时', this.selectMinute + '分', this.selectSecond + '秒'];
          break;
        case DATE_TYPES.HM:
          ret = [this.selectHour + '时', this.selectMinute + '分'];
          break;
        default:
          ret = [this.selectYear + '年', this.selectMonth + '月', this.selectDay + '日'];
          break;
      }
      return ret;
    }
  },
  methods: {
    onChangePickerValue(e) {
      const { value } = e;

      if (this.mode == DATE_TYPES.YM && value[0] && value[1]) {
        // 年月模式
        this.selectYear = Number(value[0].replace('年', ''));
        this.selectMonth = Number(value[1].replace('月', ''));
      } else if (this.mode == DATE_TYPES.Y && value[0]) {
        // 只有年份模式
        this.selectYear = Number(value[0].replace('年', ''));
      } else if (this.mode == DATE_TYPES['YMD-HMS'] && value[0] && value[1] && value[2] != '' && value[3] && value[4] && value[5]) {
        // 年月日时分秒模式
        this.selectYear = Number(value[0].replace('年', ''));
        this.selectMonth = Number(value[1].replace('月', ''));
        this.selectDay = Number(value[2].replace('日', ''));
        this.selectHour = Number(value[3].replace('时', ''));
        this.selectMinute = Number(value[4].replace('分', ''));
        this.selectSecond = Number(value[5].replace('秒', ''));
      } else if (this.mode == DATE_TYPES.HMS && value[0] && value[1] && value[2]) {
        // 时分秒模式
        this.selectHour = Number(value[0].replace('时', ''));
        this.selectMinute = Number(value[1].replace('分', ''));
        this.selectSecond = Number(value[2].replace('秒', ''));
      } else if (this.mode == DATE_TYPES.HM && value[0] && value[1]) {
        // 时分模式
        this.selectHour = Number(value[0].replace('时', ''));
        this.selectMinute = Number(value[1].replace('分', ''));
      } else if (value[0] && value[1] && value[2]) {
        // 默认，年月日模式
        this.selectYear = Number(value[0].replace('年', ''));
        this.selectMonth = Number(value[1].replace('月', ''));
        this.selectDay = Number(value[2].replace('日', ''));
      } else {
        // 其他情况可能是pickerView返回的数据有问题，不处理
        console.log('onChangePickerValue其他情况');
        return;
      }

      let formatTmpl = 'YYYY-MM-DD';
      switch (this.mode) {
        case DATE_TYPES.YM:
          formatTmpl = 'YYYY-MM';
          break;
        case DATE_TYPES.Y:
          formatTmpl = 'YYYY';
          break;
        case DATE_TYPES['YMD-HMS']:
          formatTmpl = 'YYYY-MM-DD HH:mm';
          break;
        case DATE_TYPES.HMS:
          formatTmpl = 'HH:mm:ss';
          break;
        case DATE_TYPES.HM:
          formatTmpl = 'HH:mm';
          break;
        default:
          break;
      }

      this.$emit(
        'onChange',
        DateUtil.formatDate(
          new Date(`${this.selectYear}/${this.selectMonth}/${this.selectDay} ${this.selectHour}:${this.selectMinute}:${this.selectSecond}`),
          formatTmpl
        )
      );
    }
  }
};