需求:
1.在table中画出全年的日历
2.不存在的日期用黑色背景表示
3.根据传入的开始和结束日期动态控制该范围内日期的显示内容
最终的效果如图所示:
解决步骤分析:
1.在table中画出全年日历。每一行为一行tr,里面的每一个小块为一个td
<!-- 日历的第一行 --> <tr> <td align="center" colspan="3"> <span style="display: block; 90px; text-align: center" >月</span > </td> <td v-for="index1 in 31" :key="index1" colspan="1" align="center"> <span style="display: block; 28px; text-align: center" >{{ index1 }} </span> </td> </tr> <tr v-for="index in 12" :key="index"> <!-- 循环出月份 --> <td align="center" colspan="3"> <span style="display: block; 90px; text-align: center">{{ index }}</span> </td> <!-- 每月循环出31天 --> <td style=" -webkit-print-color-adjust: exact; -moz-print-color-adjust: exact; -ms-print-color-adjust: exact; print-color-adjust: exact; " colspan="1" v-for="index1 in 31" :key="index1" align="center" @click="dayClick(index, index1)" > <span style="display: block; 28px; text-align: center"> {{ index1}} </span> </td> </tr>
2.不存在的日期黑色背景表示
除二月份需要特殊判断,其他的日期可以写为固定值
nonExistentDate: ["2-30", "2-31", "4-31", "6-31", "9-31", "11-31"],
动态控制背景颜色:
:bgColor="nonExistentDate.includes(`${index}-${index1}`)"
3.根据后台返回的日期动态显示内容
获取时间范围内的日期
getMiddleData(startTime, endTime) { const dealTimeArr = []; let dealStartTime = new Date(startTime).getTime(); const dealEndTime = new Date(endTime).getTime(); // eslint-disable-next-line no-constant-condition while (true) { if (dealStartTime <= dealEndTime) { const itemTime = this.isChinaStandardTime( new Date(dealStartTime).toString(), "Y-m-d" ); dealTimeArr.push(itemTime); dealStartTime += 24 * 60 * 60 * 1000; } else { break; } } return dealTimeArr; }, isChinaStandardTime(time) { let temp = ""; // 判断 时间 是否是 时间字符串, 还是中国标准时间,是中国标准时间 就转换 if (time.indexOf("中国标准时间") !== -1) { temp = this.dayjs(time).format("YYYY-MM-DD"); return temp; } return time; },
获取到的日期格式为YYYY-MM-DD,需要截取出需要的部分。
代码判断:
{{ signDayArr.indexOf( `${index > 9 ? index : "0" + index}-${ index1 > 9 ? index1 : "0" + index1 }` ) > -1 ? "√" : index1 }}
完整的代码:
<!-- 日历的第一行 --> <tr> <td align="center" colspan="3"> <span style="display: block; 90px; text-align: center" >月</span > </td> <td v-for="index1 in 31" :key="index1" colspan="1" align="center"> <span style="display: block; 28px; text-align: center" >{{ index1 }} </span> </td> </tr> <tr v-for="index in 12" :key="index"> <!-- 循环出月份 --> <td align="center" colspan="3"> <span style="display: block; 90px; text-align: center">{{ index }}</span> </td> <!-- 循环出每月的天数 --> <td :bgColor="nonExistentDate.includes(`${index}-${index1}`)" style=" -webkit-print-color-adjust: exact; -moz-print-color-adjust: exact; -ms-print-color-adjust: exact; print-color-adjust: exact; " colspan="1" v-for="index1 in 31" :key="index1" align="center" @click="dayClick(index, index1)" > <span style="display: block; 28px; text-align: center"> {{ signDayArr.indexOf( `${index > 9 ? index : "0" + index}-${ index1 > 9 ? index1 : "0" + index1 }` ) > -1 ? "√" : index1 }} </span> </td> </tr>
完结撒花!