一个简单日历的实现（以小程序为例）

最近作的小程序，有个页面要求展现日历。因而，结合网络上的一些文章，作了一个简单版，即拿即用。

效果图：

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…