微信小程序-日历

1.wxml

<view class='container'>

<view class='datePickerContainer'>

  <view style='color:{{baseColor}};' class='datePicker-title'>
    <text style='margin-right:35rpx;' decode='true'>&lt;</text><text>{{datePicker.year}}年{{datePicker.month}}月</text><text style='margin-left:30rpx;' decode='true'>&gt;</text>
  </view>

  <view class='datePicker-subtitle'>
    <text>日</text>
    <text>一</text>
    <text>二</text>
    <text>三</text>
    <text>四</text>
    <text>五</text>
    <text>六</text>
  </view>

  <view class='datePicker-body'>

    <block wx:for="{{datePicker.date}}" wx:for-index="i" wx:for-item="value1">

        <view wx:if="{{i % 7 == 0 }}" class='datePicker-body-row'>
          <text wx:for="{{[i,i + 1,i + 2,i + 3,i + 4,i + 5,i + 6]}}" wx:for-index="j" wx:for-item="value2">
            {{datePicker.date[value2].showdate}}
          </text>
        </view> 

    </block>

  </view>
</view>



</view>

2. javascript

  getMonthDate: function(year, month) {

    var ret = [];

    if (!year || !month) {

      var today = new Date()

      var year = today.getFullYear()

      var month = today.getMonth() + 1

    }

    var firstDay = new Date(year, month - 1, 1)

    year = firstDay.getFullYear()

    month = firstDay.getMonth() + 1

    var firstDayWeekDay = firstDay.getDay()

    if (firstDayWeekDay == 0) {
      firstDayWeekDay = 7
    }
    var lastDayOfLastMonth = new Date(year, month - 1, 0)
    var lastDateOfLastMonth = lastDayOfLastMonth.getDate()

    var preMonthDayCount = firstDayWeekDay

    var lastDay = new Date(year, month, 0)
    var lastDate = lastDay.getDate()


    for (var i = 0; i < 7 * 5; i++) {

      var date = i + 1 - preMonthDayCount
      var showdate = date
      var thismonth = month

      if (date <= 0) {
        thismonth = month - 1
        showdate = lastDateOfLastMonth + date
      } else if (date > lastDate) {
        thismonth = month + 1
        showdate = showdate - lastDate
      }

      if (thismonth === 0) {
        thismonth = 12
      }

      if (thismonth === 13) {
        thismonth = 1
      }

      ret.push({
        thismonth: thismonth,
        date: date,
        showdate: showdate,
      })

    }

    return {
      year: year,
      month: month,
      date: ret
    }
  }

3.附加 

    <view class='datePicker-body'>

      <block wx:for="{{datePicker.date}}" wx:for-index="i" wx:for-item="value1" wx:if="{{ i % 7 == 0 }}" wx:key="{{i}}">
        <view wx:if="{{ (i==0 && datePicker.date[i+6].thismonth == datePicker.month) || (i==35 && datePicker.date[i].thismonth == datePicker.month) || (( i != 0 || i != 35 ) && datePicker.date[i].thismonth == datePicker.month)}}" class='datePicker-body-row'>

          <block wx:for="{{[i,i + 1,i + 2,i + 3,i + 4,i + 5,i + 6]}}" wx:for-index="j" wx:for-item="value2" wx:key="{{j}}">
          
            <view style='{{datePicker.date[value2].today == 1 || datePicker.date[value2].selected == 1?"background-color:"+baseColor:""}}' class='dateCell' >
              <text catchtap='tapDate' data-date='{{[datePicker.date[value2].thismonth,datePicker.date[value2].date]}}' wx:if="{{datePicker.date[value2].thismonth == datePicker.month}}">{{datePicker.date[value2].showdate}}
      </text>
            </view>
          </block>

        </view>
      </block>

    </view>