一個簡單日曆的實現（以小程序爲例）

最近作的小程序，有個頁面要求展現日曆。因而，結合網絡上的一些文章，作了一個簡單版，即拿即用。

效果圖：

js代碼：

邏輯都寫在註釋中，這裏就不囉嗦了。

const dat = new Date(); // 今天的標準時間
        const timeY = dat.getFullYear() // 本年度
        const timeM = dat.getMonth()// 本月，注意值是0-11
        const timeD = dat.getDate() // 日期
        // 獲取本月長度
        const start = new Date(timeY, timeM, 1) // 本月第一天的中國標準時間，
        console.log(start);//Fri Nov 01 2019 00:00:00 GMT+0800
        const end = new Date(timeY, timeM+1, 0) // 本月最後一天的中國標準時間
        console.log(end);
        const thisMLastD = end.getDate() // 本月最後一天的日期，也是本月的長度
        // 獲取下個月的第一天
        const nextFirst = new Date(timeY, timeM+1, 1); // 下個月第一天的標準時間
        const nextFirstW = nextFirst.getDay(); // 下個月第一天的星期數，周天是0，其餘跟星期幾一致
        console.log(nextFirstW);

        const lastMLast = new Date(timeY, timeM, 0) // 上個月最後一天的中國標準時間
        const lastMLastW = lastMLast.getDay(); // 上個月最後一天的星期數,+1就是上個月要展現的天數
        const lastMLength = lastMLast.getDate(); // 上個月最後一天的日期數
        console.log(lastMLength)
        console.log(lastMLastW)
        // 上月要展現的數組
        let lastMonthDate = []
        // 因爲星期日排第一位，上個月要展現的日期數量應該是上個月最後一天星期數+1，好比最後一天是週四，那就展現5天
        for (var i = 0; i< lastMLastW+1; i++ ) {
            let index = lastMLength - lastMLastW + i // 上個月總長度減去上月最後一天的星期數等於上月應該展現的第一天的日期數
            let item = {num:index}
            console.log(item)
            lastMonthDate.push(item);
        }
        console.log(lastMonthDate)

        // 本月要展現的數組
        let thisMonthDate = []
        for (var i = 0; i< thisMLastD + 1; i++ ) {
            let item = {num:i}
            console.log(item)
            thisMonthDate.push(item);
        }
        console.log(thisMonthDate)

        // 下月要展現的數組
        let nextMonthDate = []
        if (nextFirstW !== 0) { // 爲0說明是周天，也就不必展現下月了
            for (let i = 0; i < 7 - 2; i++) {
            let item = {num:i+1}
                nextMonthDate.push(item)
            }
        }
        console.log(nextMonthDate)
        
        //頁面中作三個循環，依次循環lastMonthDate、thisMonthDate和nextMonthDate。
        // 爲啥要搞成數組，不根據月份長度直接循環？
        // 方便作UI，畢竟通常日曆確定都是某些日期會有狀態的，好比5號是生日，要加個背景色啥的，能夠把狀態值也添加進數組

複製代碼

html代碼(以小程序爲例)

分爲四個部分：星期（你作成數組循環也能夠，這裏直接寫死）；上月日期，本月完整日期；下月日期。完整點的話，你能夠本身作個判斷，看上月和下月是否須要展現，好比上個月的最後一天恰好星期六，本月第一天正好星期天，那上月就沒有展現必要了。

<view>
        <ul>
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
        <ul>
            /*li標籤裏不加view也行，看本身須要*/
            <li wx:for="{{lastMonthDate}}">
              <view class="calendar-view">{{item.num}}</view>
            </li>
            <li wx:for="{{thisMonthDate}}">
              <view class="calendar-view">{{item.num}}</view>
            </li>
            <li wx:for="{{nextMonthDate}}">
              <view class="calendar-view">{{item.num}}</view>
            </li>
        </ul>
    </view>
複製代碼

css代碼：

樣式也很簡單，浮動佈局能夠讓li標籤每鋪滿一行後自動換行。

ul {
            width: 500px;
        }
        li {
            list-style-type: none;
            float: left;
            width: 13.6%;
            height: 20px;
        }
複製代碼

回頭有空會傳到GitHub～歡迎關注 github.com/suosuojiang…