頁面內的日歷展示
阿新 • • 發佈:2019-01-29
get 日歷 span info img def .get ren else
需求:可以進行年份與月份的選擇並根據選擇展示相應的日歷,如下圖所示,
解決方案:
<div class="week aui-margin-l-10 aui-margin-r-10"> <div>日</div> <div>一</div> <div>二</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> </div> <div class="dateList" style="margin:10px;"> <div class="dateDiv" v-for="(vo, index) in calendarList"> <dl v-if="vo != 0"> <dt>{{ vo }}</dt> <dd>7</dd> </dl> <dl v-else><dt></dt><dd></dd></dl> </div> </div>
var nowadays = new Date(); var currentYear = nowadays.getFullYear(); // 當前年份 var currentMonth = nowadays.getMonth()+1; // 當前月份 var currentDayNum = new Date(currentYear, currentMonth, 0).getDate(); // 獲取本月天數 var currentDay = new Date(currentYear+"-"+(currentMonth<10?("0"+currentMonth):currentMonth)+"-01").getDay(); //獲取本月1日為星期幾 for(var i = 1; i <= currentDayNum; i++){ vm.calendarList.push(i); } switch (currentDay) { case 1: // 星期一 vm.calendarList.unshift(0); break; case 2: // 星期二 vm.calendarList.unshift(0,0); break; case 3: // 星期三 vm.calendarList.unshift(0,0,0);break; case 4: // 星期四 vm.calendarList.unshift(0,0,0,0); break; case 5: // 星期五 vm.calendarList.unshift(0,0,0,0,0); break; case 6: // 星期六 vm.calendarList.unshift(0,0,0,0,0,0); break; default: break; } var lackDate = 7 - (vm.calendarList.length % 7); if(lackDate < 7){ for(var j = 0; j < lackDate; j++){ vm.calendarList.push(0); } }
頁面內的日歷展示