mini_program/components/ui-calendar/ui-calendar.wxml

<wxs module="dateUtil">
  var isDate = function(date) {
    return date && date.getMonth;
  };

  var isLeapYear = function(year) {
    //传入为时间格式需要处理
    if (isDate(year)) year = year.getFullYear()
    if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) return true;
    return false;
  };

  var getDaysOfMonth = function(date) {
    var month = date.getMonth(); //注意此处月份要加1，所以我们要减一
    var year = date.getFullYear();
    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  }

  var getBeginDayOfMouth = function(date) {
    var month = date.getMonth();
    var year = date.getFullYear();
    var d = getDate(year, month, 1);
    return d.getDay();
  }

  var getDisplayInfo = function(date) {

    if (!isDate(date)) {
      date = getDate(date)
    }
    var year = date.getFullYear();

    var month = date.getMonth();
    var d = getDate(year, month);


    //这个月一共多少天
    var days = getDaysOfMonth(d);

    //这个月是星期几开始的
    var beginWeek = getBeginDayOfMouth(d);

    return {
      year: year,
      month: month,
      days: days,
      beginWeek: beginWeek
    }
  };

  //分割月之间的展示
  var monthClapFn = function(year, month) {
    month = month + 1;
    return year + '年' + (month) + '月';
  };


  //时间转化
  var getChangedDate = function(date) {
    var timer = date.split('-')
    var changedYear = parseInt(timer[0])
    var changedMonth = parseInt(timer[1])-1
    var my_month = parseInt(timer[1])
    return {
      str_month: monthClapFn(changedYear, changedMonth)
      date: getDate(changedYear, changedMonth),
      year: changedYear,
      month: changedMonth,
      my_month: my_month
    };
  };

  var isSelected = function(date, year, month, day) {
    if (!isDate(date)) {
      date = getDate(date);
    }

    if (date.getFullYear() == year && date.getMonth() == month && date.getDate() == day) return 'active active-back-one';
    return '';

  };

  var formatNum = function(n) {
    if (n < 10) return '0' + n;
    return n;
  };

  module.exports = {
    getDipalyInfo: getDisplayInfo,
    getChangedDate: getChangedDate,
    isSelected: isSelected
  }
</wxs>
    <view class="cm-calendar">
      <view class="cm-calendar-hd">
        <block wx:for="{{weekDayArr}}" wx:key="weekDayKey">
          <view class="item">{{item}}</view>
        </block>
      </view>
      <block>
        <view class="cm-calendar-bd ">
          <view class="cm-day-list">
            <block wx:key="tt"
              wx:for="{{dateUtil.getDipalyInfo(dateUtil.getChangedDate(displayTime).date).days + dateUtil.getDipalyInfo(dateUtil.getChangedDate(displayTime).date).beginWeek}}"
              wx:for-index="index">
              <view wx:if="{{index < dateUtil.getDipalyInfo(dateUtil.getChangedDate(displayTime).date).beginWeek }}"
                class="item"></view>
              <view bindtap="onDayTap" wx:else data-year="{{dateUtil.getChangedDate(displayTime).year}}"
                data-month="{{dateUtil.getChangedDate(displayTime).my_month}}"
                data-day="{{index + 1 - dateUtil.getDipalyInfo(dateUtil.getChangedDate(displayTime).date).beginWeek}}"
                class="item {{dateUtil.isSelected(selectedDate, dateUtil.getChangedDate(displayTime).year, dateUtil.getChangedDate(displayTime).month, index + 1 - dateUtil.getDipalyInfo(dateUtil.getChangedDate(displayTime).date).beginWeek)}}">
                <view class="cm-field-title">
                  {{index + 1 - dateUtil.getDipalyInfo(dateUtil.getChangedDate(displayTime).date).beginWeek }}
                </view>
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>