自定义日历

data() {
    return {
      selDat: "", //当前选择的标记
      overMoon: "", //结束日期
      disableDay: [], //禁止选择日期
      time: [], //时间段
      selTimeArr: [], //选择的时间
      year: "",
      moon: "",
      day: "",
      dayArr: [],
      dateTitle: {
        year: "",
        moon: "",
        day: "",
      },
      hideObj: {
        year: "",
        moon: "",
        day: "",
      },
    };
  },

//获取当前日期
getNowDay() {
  //获取当前年月日
  let d = new Date();
  
  this.year = d.getFullYear();//当前年 不会变化，为了比较用
  this.moon = d.getMonth() + 1;//当前月 不会变化，为了比较用
  this.day = d.getDate();//当前日 不会变化，为了比较用
  
  this.dateTitle.year = this.year;//可变化，切换月份点击日期
  this.dateTitle.moon = this.moon;//可变化，切换月份点击日期
  this.dateTitle.day = this.day;//可变化，切换月份点击日期

  
  this.getCalendar(
    this.dateTitle.year,
    this.dateTitle.moon,
    this.getWeek(this.dateTitle.year, this.dateTitle.moon),
    this.getDayNumber(this.dateTitle.year, this.dateTitle.moon)
  );
},
  
//获取当前月份天数
getDayNumber(y, m) {
  return new Date(y, m, 0).getDate();
},
 //获取当前日期周几 0-6
getWeek(y, m, d = 1) {
  return new Date(y, m - 1, d).getDay();
},
  
  
//渲染日历
// 输出当前月份天
getCalendar(y, m, one, num) {
  let arr = [];
  let mask = 1;
  let nextMonthDay = 1;
  let lastY = m - 1 == 0 ? y - 1 : y;
  let lastM = m - 1;
  let lastMonth = this.getDayNumber(lastY, lastM);
  for (let i = 0; i < 6; i++) {
    //6行7列
    let temp = [];
    for (let j = 0; j < 7; j++) {
      if (i == 0) {
        //第一行
        if (j < one) {
          temp.unshift({
            isSelect: false, //选中状态
            cur: false, //是否当前月
            text: lastMonth--,//天
            year: this.dateTitle.year,//年
            m: this.dateTitle.moon,//月
            nowDay: false,//是否当天
          });
        } else {
          let obj = {
            isSelect: false, //选中状态
            cur: true, //是否当前月
            text: mask++,//天
            year: this.dateTitle.year,//年
            m: this.dateTitle.moon,//月
            nowDay: false,//是否当前
          };
          if (
            obj.year == this.year &&
            obj.m == this.moon &&
            obj.text == this.day
          ) {
            obj.nowDay = true;
          }
          if (obj.year < this.year) {
            obj.cur = false;
          }
          if (obj.m < this.moon && obj.year <= this.year) {
            obj.cur = false;
          }
          if (
            obj.text < this.day &&
            obj.m <= this.moon &&
            obj.year <= this.year
          ) {
            obj.cur = false;
          }
          let nowDay = `${obj.year}-${obj.m}-${obj.text}`;
          if (this.selDat == nowDay) {
            obj.isSelect = true;
          }
          let wm = obj.m < 10 ? `0${obj.m}` : obj.m;
          let wd = obj.text < 10 ? `0${obj.text}` : obj.text;
          let wNow = `${obj.year}-${wm}-${wd}`;

          if (this.isDisable(wNow)) {
            obj.cur = false;
          }
          temp.push(obj);
        }
      } else {
        //234..行
        let t = mask++;
        if (t > num) {
          temp.push({
            isSelect: false,
            cur: false,
            // text: nextMonthDay++,
            text: "",
            year: this.dateTitle.year,
            m: this.dateTitle.moon,
            nowDay: false,
          });
        } else {
          let obj = {
            isSelect: false, //选中状态
            cur: true, //是否当前月
            text: t++,
            year: this.dateTitle.year,
            m: this.dateTitle.moon,
            nowDay: false,
          };
          if (
            obj.year == this.year &&
            obj.m == this.moon &&
            obj.text == this.day
          ) {
            obj.nowDay = true;
          }
          if (obj.year < this.year) {
            obj.cur = false;
          }
          if (obj.m < this.moon && obj.year <= this.year) {
            obj.cur = false;
          }
          if (
            obj.text < this.day &&
            obj.m <= this.moon &&
            obj.year <= this.year
          ) {
            obj.cur = false;
          }
          let nowDay = `${obj.year}-${obj.m}-${obj.text}`;
          if (this.selDat == nowDay) {
            obj.isSelect = true;
          }
          let wm = obj.m < 10 ? `0${obj.m}` : obj.m;
          let wd = obj.text < 10 ? `0${obj.text}` : obj.text;
          let wNow = `${obj.year}-${wm}-${wd}`;
          if (this.isDisable(wNow)) {
            obj.cur = false;
          }
          temp.push(obj);
        }
      }
    }
    arr.push(temp);
  }
  this.dayArr = arr;
},