小程序之路——日历页面的书写

  日历界面在网上是有很多组件的，这里我们学习并使用了一个，来显示日历的显示。

<view class="wrapper">
  <view class="og-calendar">
    <view class="header">
      <view class="btn month-pre" bindtap="changeDateEvent" data-year="{{data.beforeYear}}" data-month="{{data.beforMonth}}"> 
        <image src="../../images/prepage.png"></image>
      </view>
      <view class="date-info">
        <picker mode="date" fields="month" value="{{pickerDateValue}}" bindchange="datePickerChangeEvent">
          <text wx:if="{{data.showYear}}">{{data.showYear}}年{{data.showMonth > 9 ? data.showMonth : ('0' + data.showMonth)}}月</text>
          <text wx:if="{{!data.showYear}}">请选择日期</text>
        </picker>
      </view>
      <view class="btn month-next" bindtap="changeDateEvent" data-year="{{data.afterYear}}" data-month="{{data.afterMonth}}">
        <image src="../../images/nextpage.png"></image>
      </view>
    </view>
    <view class="week row">
      <view class="col">
        <text>一</text>
      </view>
      <view class="col">
        <text>二</text>
      </view>
      <view class="col">
        <text>三</text>
      </view>
      <view class="col">
        <text>四</text>
      </view>
      <view class="col">
        <text>五</text>
      </view>
      <view class="col">
        <text>六</text>
      </view>
      <view class="col">
        <text>日</text>
      </view>
    </view>
    <view class="body row">  
      <block wx:for="{{data.dates}}" wx:key="_id">
        <view bindtap="dateClickEvent" data-year="{{item.year}}" data-month="{{item.month}}" data-date="{{item.date}}" class="col {{data.showMonth == item.month ? '' : 'old'}} {{data.currentDate == item.date && data.currentYear==item.year && data.currentMonth == item.month ? 'current' : ''}} {{item.active ? 'active' : ''}}">
          <text>{{item.date}}</text>
        </view> 
      </block>
    </view>
  </view>