JavaScript简单日历实现-小程序版

这个日历应该是网页中常见的小功能了，这个也是window下的时间显示器，这篇文章，就来实现下这个效果的小程序版本，哈哈，求个赞~~~这个可以当做小程序学习的一个很好的实例啦，底部有下载链接，有需要的可以下载查看源码去我个人网站浏览效果更好一些哈传送门zhengyepan.com

image
一、实现的思路

写js的时候，最重要的就是思路了，先有思路在用思路去做细节实现。首先呢，我来说下我的思路，不同人写同种效果可能有不同思路，不能说谁的思路厉害，但是有句话说的好，不管黑猫白猫，能抓到老鼠的就是好猫，同样道理。当然了，严谨的思路更加容易维护代码啦

思路：

当月有多少天

当月第一天星期几

日历一行有七个格子，对应周日到周六（周日算一周的开始），每月最多31天，最少28天，根据前两个条件来决定要显示多少行，如果当月第一天不是周日的话，则第一排前面的格子有上月天数的填满，如果当月最后一天不是周六，则剩下的格子有下月天数补上。

4.我需要是我只要传入一个年份月份参数给一个函数，它就会自动渲染日历格子 例如：calendar(year,month)

根据上面的思路我们来具体实现它。

wxml

<view class="calendar">
      <view class="flex calendar-choose">
            <view class="tc mouth-wrap">
                  <view class="fl prev-mouth" data-handle="prev" bindtap="handleMonth">
                        <text class="iconfont icon-zuoyouqiehuan">text>
                  view>
                  <view class="mouth-picker">
                         <picker value="{{cur_month}}" range="{{monthList}}" bindchange="chooseMonth">
                              <view class="picker">{{cur_month+1}}月view>
                        picker> 
                  view>
                  <view class="fr next-mouth"  data-handle="next" bindtap="handleMonth">
                        <text class="iconfont icon-zuoyouqiehuan1">text>
                  view>
            view>
            <view class="year-wrap">
                   <picker class="tr" value="{{itemIndex}}" range="{{yearList}}" style="width:200rpx;" bindchange="chooseYear">
                         <view class="picker">{{yearList[itemIndex]}}年view>
                   picker>
                  <view class="iconfont icon-xia">view>
            view>
      view>
       <view>
            <view class="flex week-list">
                  <view class="week-itm" wx:for="{{weeklist}}">{{item}}view>
            view>
            <view class="flex days-list">
                  <view class="day lm" wx:for="{{lastMonthDaysList}}" data-handle="prev" bindtap="handleMonth">
                        <text>{{item}}text>
                  view>
                  <block  wx:for="{{currentMonthDaysList}}">
                        <view class="day">
                              <text>{{item}}text>
                        view>
                  block>
                  <view class="day nm" wx:for="{{nextMonthDaysList}}" data-handle="next" bindtap="handleMonth">
                        <text>{{item}}text>
                  view>
            view> 
      view>  
view>

wxss

/**app.wxss**/
.calendar{overflow-x:hidden;}
.calendar-choose{height:100rpx;line-height:100rpx;background:#fefefe;padding:0 30rpx;
font-size:34rpx;