封面圖.JPG

前言

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

日期和時間組件.gif

這樣的方式，不是很反人嗎？后來需求方要求有簡單的操作方式，直觀且易操作，于是要求像如下圖的

效果圖.png

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

image

思路

看上面的效果圖，用官方的日期，時間組件合并用，肯定不行的，但官方picker有個mode，叫multiSelector，官方的解釋是

mode為 selector 或 multiSelector 時，range 有效。二維數組，長度表示多少列，數組的每項表示每列的數據，如[["a","b"], ["c","d"]]

這數組可以自定義的，聽起來跟上面的效果圖需求蠻符合的，但數組怎么自定義的，這就需要js來實現的，我已經寫成一個日期組件的庫，下面會附上github地址。

wxml

時間：

{{dateVal}}

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

喜歡的話，就給個star

image

總結

以上是生活随笔為你收集整理的php 今天 明天 后天 显示10天,【微信小程序】实现含有今天，明天，后天的日期组件...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。