到年底了，總會(huì)檢查自己做過的項(xiàng)目，以便總結(jié)下，然后在github上檢查，發(fā)現(xiàn)有些項(xiàng)目沒意義了，就刪掉了，其中有一個(gè)項(xiàng)目，就是這篇文章的題目，覺得這個(gè)項(xiàng)目???，但代碼方面不是太滿意的，特別是代碼的設(shè)計(jì)結(jié)構(gòu)，我覺得要造輪子就是要讓別人或者自己能夠直接使用，并不是使用后還要改造。所以我就對(duì)這個(gè)項(xiàng)目重構(gòu)了～

小程序 - 日期時(shí)間選擇器

含有今天，明天，后天的關(guān)鍵詞，支持一列只有今天，明天，后天，還可支持轉(zhuǎn)換為日期格式的。wepy，Taro，wepy或者原生都可引用

IMB_1.GIF

使用的方法：

• 先引用js文件：

  • 第一種：
    • 復(fù)制utils文件夾下的datePicker.js所有代碼，粘貼到自己的文件里
  • 第二種：
    • git clone https://github.com/FernwehNancy/wxapp-datePicker.git
    • 把datePicker.js文件復(fù)制到自己的項(xiàng)目里

• wxml文件插入picker多列選擇器

<view class="section">
  <picker mode="multiSelector" range="{{dateArray}}" value="{{dateIndex}}" bindchange="datePickerChange">
  <view class="section-val">{{dateVal}}</view>
  </picker>
</view>

• 然后在js文件上引入日期選擇的文件里實(shí)例化對(duì)象，如下

//引入datePicker的實(shí)例對(duì)象
import { DatePicker } from '../utils/datePicker2';

//實(shí)例化對(duì)象
const datePicker = new DatePicker();
//制造日期的數(shù)組數(shù)據(jù)
const dateArr = datePicker.datePicker();

• 然后把dateArr傳給range的值（dateArray);

this.setDate({
    dateArray: dateArr.dateAll,
})

• value這個(gè)值，如果不傳的話，默認(rèn)值就是當(dāng)前時(shí)間

this.setDate({
    dateArray: dateArr.currentDateArr,
})

• 僅僅展示“今天 某某時(shí)間“，這倒可以的，但需要把這個(gè)時(shí)間傳給接口時(shí)，這就需要轉(zhuǎn)換為日期格式的，所以我這邊還提供能轉(zhuǎn)換日期格式的功能，使用如下：

//需要把range，當(dāng)前選擇的下標(biāo)一起攜帶去
this.setData({
    dataVal: datePicker.toDate(dateArr.dateAll,dateArr.currentDateArr)
})

這樣就可以了。

但如果只需要第一列只需要“今天，明天，后天”這三個(gè)的話，那實(shí)例化對(duì)象給個(gè)這三個(gè)的就可以了，如下：

const params={
    dateArr:['今天','明天','后天']
}
const datePicker = new DatePicker(params);

效果如下：

IMB_2.GIF

github源代碼在此

不錯(cuò)的話，請(qǐng)點(diǎn)start，筆芯～當(dāng)然如果還有問題的話，可以提出來