1. 程式人生 > >頁面內的日歷展示

頁面內的日歷展示

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

頁面內的日歷展示