【微信小程序】實現含有今天，明天，後天的日期組件

前言

作過微信小程序的前端er都知道，小程序有個日期組件，叫picker，可是，需求方要求日期和時間都要顯示的，用picker組件的話，那就用到兩個picker，date和time，就是說要讓用戶點擊兩次，選擇好了日期，再選擇時間，以下圖

這樣的方式，不是很反人嗎？後來需求方要求有簡單的操做方式，直觀且易操做，因而要求像以下圖的

當時我心裏有千萬個草泥馬在奔跑，行吧，我就不信網上沒相似這個玩意，就去搜索，結果有了，可是有很大的差異，別怕，只要改造代碼就行

思路

看上面的效果圖，用官方的日期，時間組件合併用，確定不行的，但官方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,
      })
    }
  }
})
複製代碼

結果圖

附上gitbub地址：github.com/FernwehNanx…

喜歡的話，就給個star