微信小程序云开发之日期选择器的实现

日期选择器的实现在很多地方也能用的到，比如填写生日、预约日期等等。通过选择器能够很方便的帮助用户进行选择所需要的日期。

实现该功能有以下几个步骤：

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>

二、实现

通过以上几个简单的步骤就实现了该功能，如果你有问题，可以下方留言，看到之后会第一时间回复！