2018-06-05 微信小程序 学习笔记-picker

知识点：picker

image

突然有一天，测试提出了日期选择控件可以选择到2月30日的bug，作为程序猿只能义不容辞的扛下消灭这虫子的重任。

var app = getApp();
var dateTimePicker = require('../../common/lib/dateTimePicker.js');
var date = new Date();

module.exports = {
  dateTimePicker: dateTimePicker,
  getMonthDay: getMonthDay
}

先理解原先的代码，
可以发现原先导入了个日期选择器的插件.
并且在dateTimePicker.js中，暴露出来了两个方法.
但是代码中并没有看到调用getMonthDay这个方法，
所以接下来定的目标就是通过这个方法来获取正确的日期并且展现出来。

<view class="drawer_screen" bindtap="cancle"></view> 
  <view class="drawer_box" style='margin-top:-140px'> 
    <view class="drawer_title">修改时间</view> 
      <view class="drawer_content"> 
        <view class=" grid" style='margin-bottom:10px'> 
          <view class='picker'>
           <picker mode="multiSelector" range="{{start_times}}" value="{{time_index}}" bindchange="start_time">{{start_text_change}}</picker> 
          </view>
        </view> 
        <view class=" grid"> 
          <view class='picker'>
           <picker mode="multiSelector" range="{{end_time}}" value="{{end_time_index}}" bindchange="over_time">{{end_text_change}}</picker> 
          </view>
        </view> 
      </view> 
    <view class="btn_ok" bindtap="modify_time_sure">确定</view> 
  </view>

首先需要获取到picker滑动选择月份及年份的事件，这个通过 bindcolumnchange 来监听，看一下start_times的数据结构，是个二维数组，不难发现array[2]的数据就是要修改的日期了。

image.png

先写好bindcolumnchange触发的方法，

  //选择器日期改变事件
  column_change: function (e) {
    var that = this;
    var cur_year=that.data.cur_choose_year; 
    var cur_val=that.data.start_times[e.detail.column][e.detail.value];//获取当前选择的值
    switch(e.detail.column)
    {
          //选择的年
          case 0:
          this.setData({
            cur_choose_year:cur_val
          }); 
          break;
            //选择的月
            case 1:
            var cur_month_days=dateTimePicker.getMonthDay(cur_year, cur_val);
            var true_days=that.data.start_times; //获取排列的二维数组
            true_days[2]=cur_month_days; //把数组中的日一列给修改为当前年及月为参数所返回的正确日期
            this.setData({
              start_times:true_days,
              end_time:true_days
            }); 
            break;

          }       
          var curmonth=that.data.cur_choose_year;
        },

这里有个小问题，因为当选择月份的时候获取不到前面的年，所以定义了cur_choose_year变量并且第一次赋值为当前年。

image.png

这时候基本实现动态改变日期的功能。不过还有一个问题

 <picker mode="date" value="{{start_time}}" start="{{today}}"   bindchange="start_timedoAdd">{{start_text}}</picker> 

这类mode="date"的格式不能实现上面的功能。有待跟进...