微信小程序雲開發之日期選擇器的實現

日期選擇器的實現在很多地方也能用的到，比如填寫生日、預約日期等等。通過選擇器能夠很方便的幫助用戶進行選擇所需要的日期。

實現該功能有以下幾個步驟：

1. 引入路徑及編寫代碼
2. 實現

一、引入路徑及編寫代碼

這裏我們可以不用Vant組件，但是如果你想界面好看一點就用Vant組件。
這裏所指的引入路徑是指，在設置當前時間的時候，需要用到工具包，這個包一般自己定義：utils:

我們在utils.js文件中寫以下代碼：

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var hour = date.getHours()  //需要小時、分鐘、秒  的話就寫，不需要就不用寫
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')  //返回年月日小時分鐘秒
  //格式：1900-01-01 10:10:10

}
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
module.exports = {
  formatTime: formatTime
}

在選擇器頁面的js文件中引入該文件及編寫代碼：

var utils = require('../utils/util.js')  //根據自己的路徑進行編寫
onLoad(){
   var date = utils.formatTime(new Date());
    console.log(date)
    var time = date.split(' ')  //如果只需要年月日，不需要時分秒就寫此語句
    console.log(time[0])  //年月日
    console.log(time[1])   //時分秒
    this.setData({
      endtime:time[0]
    })
  },
  bindDateChange: function(e) {
        console.log(e.detail.value)
        this.setData({
          date: e.detail.value
        })
      },

wxml頁面：

<view class="section">
  <picker mode="date" value="{{date}}" start="1900-01-01" end="{{endtime}}" bindchange="bindDateChange">
  <van-cell class="section__title picker" title="日期選擇器:{{date}}" is-link />
  </picker>
</view>

二、實現

通過以上幾個簡單的步驟就實現了該功能，如果你有問題，可以下方留言，看到之後會第一時間回覆！