小程序 日期选择器

文章学习网址

微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）

引入js

此代码写在自己需要用的地方

const dateTimePicker = require('../../../utils/selectTimer.js');

如果我展示不需要小时，分钟，秒钟，就要这样操作

//startYear，endYear 我们可以不用定义
    let obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
    obj1.dateTimeArray.splice(3, 3);
    obj1.dateTime.splice(3, 3);
    this.setData({
      dateTimeArray1: obj1.dateTimeArray,
      dateTime1: obj1.dateTime
    });

obj1.dateTimeArray存的格式如下： [ [年..] , [月..] , [日..] ]
obj1.dateTime存的是选中后的下标：[ 41 , 6 , 4 ]

wxml展示部分

 <view class="li">
    <text>开始时间</text>
    <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
      <view class="tui-picker-detail" id="staTime">
//分别对应 年 月 日
        {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}}
      </view>
    </picker>
    <image src="{{imgUrl}}next01.png"></image>
  </view>

对changeDateTime1，changeDateTimeColumn1事件进行处理

changeDateTime1(e) {
//e.detail.value 存储的是每一列下标的修改值，未修改的值也会返回回来的
    this.setData({
      dateTime1: e.detail.value
    });
  },
changeDateTimeColumn1(e) {
    var arr = this.data.dateTime1;
    var dateArr = this.data.dateTimeArray1;
    arr[e.detail.column] = e.detail.value;
//传递年月进去，目的是为了算出平年，闰年和2月份这种特殊的情况，算出的接口需要对集合重新更新数据
    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    this.setData({
      dateTimeArray1: dateArr
    });
  }

获取最后的选择的时间

 let staTime = that.dateTimeArray1[0][that.dateTime1[0]] + '-' + that.dateTimeArray1[1][that.dateTime1[1]] + '-' + that.dateTimeArray1[2][that.dateTime1[2]];
 let endTime = that.dateTimeArray2[0][that.dateTime2[0]] + '-' + that.dateTimeArray2[1][that.dateTime2[1]] + '-' + that.dateTimeArray2[2][that.dateTime2[2]];