自定义日历

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182

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; },