9.7 日历

小程序本身没有提供日历组件，如果需要用到日历就需要自己写一个。如图9-8所示。 图9-8

创建calendar.js，calendar.wxml，calendar.wxss。

布局文件calendar.wxml代码如下：

<!--pages/record/record.wxml-->
<view class="selected_date">
  <view bindtap="preMonth">
    <image class="select_icon" src="/image/left.png"></image>
  </view>
  <view class="text_center">{{curYear+'-'+curMonth}}</view>
  <view style="text-align:right;" bindtap="nextMonth">
    <image class="select_icon" src="/image/right.png"></image>
  </view>
</view>
<view class="calendar_panel">
  <view class="calendar_box">
    <view class="weekday_label">日</view>
    <view class="weekday_label">一</view>
    <view class="weekday_label">二</view>
    <view class="weekday_label">三</view>
    <view class="weekday_label">四</view>
    <view class="weekday_label">五</view>
    <view class="weekday_label">六</view>
  </view>
  <view class="calendar_box" wx:for="{{dateList}}" wx:for-item="week" style="{{index==0?'justify-content: flex-end;':''}}">
    <view class="weekday_label" wx:for="{{week}}">
      <text class="{{item.value==selectedDate?'active_date':''}}" bindtap="selectDate" data-date="{{item}}">{{item.date}}</text>
    </view>
  </view>
</view>
<view class="show_box">选中日期：{{selectedDate}} {{selectedWeek}}</view>

可以看到布局只通过<view>组件就能实现，需要calendar.js提供数据来源。代码如下：

// pages/record/record.js
Page({
  data: {
    selectedDate: '',//选中的几月几号
    selectedWeek: '',//选中的星期几
    curYear: 2017,//当前年份
    curMonth: 0,//当前月份
    daysCountArr: [// 保存各个月份的长度，平年
      31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31
    ],
    weekArr: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
    dateList: []
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },

  onShow: function () {
    var today = new Date();//当前时间  
    var y = today.getFullYear();//年  
    var mon = today.getMonth() + 1;//月  
    var d = today.getDate();//日  
    var i = today.getDay();//星期  
    this.setData({
      curYear: y,
      curMonth: mon,
      selectedDate: y + '-' + mon + '-' + d,
      selectedWeek: this.data.weekArr[i]
    });

    this.getDateList(y, mon - 1);
  },
  getDateList: function (y, mon) {
    var vm = this;
    //如果是否闰年，则2月是29日
    var daysCountArr = this.data.daysCountArr;
    if (y % 4 == 0 && y % 100 != 0) {
      this.data.daysCountArr[1] = 29;
      this.setData({
        daysCountArr: daysCountArr
      });
    }
    //第几个月；下标从0开始实际月份还要再+1  
    var dateList = [];
    // console.log('本月', vm.data.daysCountArr[mon], '天');
    dateList[0] = [];
    var weekIndex = 0;//第几个星期
    for (var i = 0; i < vm.data.daysCountArr[mon]; i++) {
      var week = new Date(Date.UTC(year, month - 1, i + 1)).getDay();
      dateList[weekIndex].push({
        value: y + '-' + (mon + 1) + '-' + (i + 1),
        date: i + 1,
        week: week
      });
      if (week == 6) {
        weekIndex++;
        dateList[weekIndex] = [];
      }
    }
    // console.log('本月日期', dateList);
    vm.setData({
      dateList: dateList
    });
  },
  selectDate: function (e) {
    var vm = this;
    // console.log('选中', e.currentTarget.dataset.date.value);
    vm.setData({
      selectedDate: e.currentTarget.dataset.date.value,
      selectedWeek: vm.data.weekArr[e.currentTarget.dataset.date.week]
    });
  },
  preMonth: function () {
    // 上个月
    var vm = this;
    var curYear = vm.data.curYear;
    var curMonth = vm.data.curMonth;
    curYear = curMonth - 1 ? curYear : curYear - 1;
    curMonth = curMonth - 1 ? curMonth - 1 : 12;
    // console.log('上个月', curYear, curMonth);
    vm.setData({
      curYear: curYear,
      curMonth: curMonth
    });

    vm.getDateList(curYear, curMonth - 1);
  },
  nextMonth: function () {
    // 下个月
    var vm = this;
    var curYear = vm.data.curYear;
    var curMonth = vm.data.curMonth;
    curYear = curMonth + 1 == 13 ? curYear + 1 : curYear;
    curMonth = curMonth + 1 == 13 ? 1 : curMonth + 1;
    // console.log('下个月', curYear, curMonth);
    vm.setData({
      curYear: curYear,
      curMonth: curMonth
    });

    vm.getDateList(curYear, curMonth - 1);
  }
})

逻辑层设置了上一个月，下一个月和每一天的点击事件。最后看下样式文件的calendar.wxss代码：

/* pages/record/record.wxss */
.selected_date {
  padding: 20rpx;
  overflow: hidden;
}
/**表示具有class=".selected_date"属性组件内的所有view组件*/
.selected_date>view {
  width: 33.3%;
  float: left;
}

.calendar_panel {
  width: 100%;
  height: 600rpx;
}

.calendar_box {
  width: 100%;
  background: #fff;
  overflow: hidden;
  border-bottom: 1rpx solid #ececec;
  display: flex;
}

.weekday_label {
  width: 14.28%;
  float: left;
  text-align: center;
  font-size: 26rpx;
  padding: 10rpx 0;
}

.weekday_label>text {
  width:50rpx;
  height: 50rpx;
  line-height: 50rpx;
  display: inline-block;
}

.select_icon {
  width: 30rpx;
  height: 30rpx;
}

.active_date {
  background: #148447;
  color: #fff;
  border-radius: 50%;
}

.show_box {
  padding: 20rpx;
  font-size: 26rpx;
}

.selected_date>view 这种选择器实际在微信小程序中也支持，指向具有class=".selected_date"属性组件内的所有view组件。