小程序实现含有今天，明天，后天的日期组件

封面图.JPG

前言

做过微信小程序的前端er都知道，小程序有个日期组件，叫picker，但是，需求方要求日期和时间都要显示的，用picker组件的话，那就用到两个picker，date和time，就是说要让用户点击两次，选择好了日期，再选择时间，如下图

日期和时间组件.gif

这样的方式，不是很反人吗？后来需求方要求有简单的操作方式，直观且易操作，于是要求像如下图的

效果图.png

当时我内心有千万个草泥马在奔跑，行吧，我就不信网上没类似这个玩意，就去搜索，结果有了，但是有很大的差别，别怕，只要改造代码就行

image

思路

看上面的效果图，用官方的日期，时间组件合并用，肯定不行的，但官方picker有个mode，叫multiSelector，官方的解释是

mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]

这数组可以自定义的，听起来跟上面的效果图需求蛮符合的，但数组怎么自定义的，这就需要js来实现的，我已经写成一个日期组件的库，下面会附上github地址。

wxml

<view class="section">
  <view class="section__title" style="margin-bottom:0;">时间：</view>
  <picker mode="multiSelector" range="{{dateArray}}" value="{{dateIndex}}" bindchange="datePickerChange">
  <view class="section-val">{{dateVal}}</view>
  </picker>
</view>

Tip：dateIndex是选择了 range 对应项中的第几个（下标从 0 开始），与其他的普通组件，日期组件，时间组件不一样

js

先导入日期组件的js，然后加载时，就把日期组件的对象分别赋值给range和value的值，默认值是当前的时间，目前不支持传入要选择的时间（后面会考虑增加），其中的month和day是用日期组件的库里获取的

const datePicker=require('../lib/datePicker');

Page({
  data: {
    dateArray: null,//picker-rang的值
    dateIndex:null,//picker-value的值
    dateVal:null,//显示的时间
  },

  //加载时获取日期的组件
  onLoad(){
    this.set_date();
  },

  //监听点击日期组件的事件变化
  datePickerChange(e){
    this.setData({
      dateIndex:e.detail.value,
    })
    this.set_newDateForm();
  },

  //赋值
  set_date(){
    let date=datePicker.dateTimePicker();
    date.dateTimeArray.pop();
    date.dateTime.pop();
    this.setData({
      dateArray: date.dateTimeArray,
      dateIndex: date.dateTime,
    })
    this.set_newDateForm();
  },

  //格式化现在的时间，比如今天改成xx月xx日
  set_newDateForm(){
    let tempDate=this.data.dateArray[0][this.data.dateIndex[0]];
    let month=datePicker.month;
    let day=datePicker.day;
    let time=this.data.dateArray[1][this.data.dateIndex[1]]+':'+this.data.dateArray[2][this.data.dateIndex[2]];
    if(tempDate.indexOf('今天')>-1){
      this.setData({
        dateVal: datePicker.withData(month) + '月' + datePicker.withData(day) + '日' + ' ' + time,
      })
    }else if(tempDate.indexOf('明天')>-1){
      this.setData({
        dateVal: datePicker.withData(month) + '月' + datePicker.withData((Number(day)+1)) + '日' + ' ' + time,
      })
    }else if(tempDate.indexOf('后天')>-1){
      this.setData({
        dateVal: datePicker.withData(month) + '月' + datePicker.withData((Number(day)+2)) + '日' + ' ' + time,
      })
    }else{
      this.setData({
        dateVal: tempDate + ' ' + time,
      })
    }
  }
})

结果图

结果图.gif

附上gitbub地址：https://github.com/FernwehNanxi/datePicker

喜欢的话，就给个star

image