小程序选择时间picker（van-popup+van-picker）change 选择时间不正确

//类似于这种样式的

请添加图片描述

//本来打算用vant自带的时间选择器糊上就行了 但是ui图是这种 那来吧/*微笑*/

//1.图中是三列 那咱就得准备三列数据（默认选择时间范围是 今天 + 往后十天 ）

//.wxml文件 (我的确认实际上是取消 自带的文字换了 再绑定好事件就行 样式自己看着调就行)
  <van-popup lock-scroll="{{true}}" round show="{{ show }}" position="bottom" custom-style="height: 516rpx">
    <van-picker ref="picker" visible-item-count="3" show-toolbar confirm-button-text="×" title="请选择出发时间"
      columns="{{columnsDate}}" bind:change="onChangeDate" bind:confirm="onConfirmDate"></van-picker>
    <view class="date_text">
      <van-button round bind:click="confirmchooseTime" type="primary"
        color="linear-gradient(to right, #259EFE, #007BDC)" block>
        确认</van-button>
    </view>
  </van-popup>

//页面json文件记得引入 或者app.json统一引入


//重点来了 页面.js文件
const $api = require('../../utils/api.js') //引入封装好的请求接口
const { FormatAll} = require('../../utils/format') //引入封装好的格式化时间的方法


Page({
  data: {
        FormatAllDatechange: "",
        FormatAllDate: FormatAll(new Date().getTime()),
        columnsDate: [],//存储三列数据的数组
        show:false//弹框的显示隐藏
  },
  onLoad() {},
  // 打开弹框
  pickTime() {
    this.setData({
      show: true
    })
    let date = this.getcolumnsDate()
    this.setData({
      columnsDate: date
    })
  },
   getcolumnsDate() {
    //当前日期
    let arrdate = this.getchooseDay(11)// 先将 10天时间组成数组
    this.setData({ // 先将含有年份的时间数组存起来 下面会用到
      arrdate: arrdate
    })
    let arr = arrdate.map(it => {
      return this.dateFormat(it) // 将十天的数组 item 加 周几
    })
    // 今天不显示周几 显示今天
    arr[0] = arr[0].toString().replace(arr[0].toString().split("/")[2], "今天")
    

    //当天剩余小时
    let arrhour = this.hourFormat()
    let currenthour = []
    for (var i = arrhour; i < 24; i++) {

      currenthour.push(i > 9 ? (i.toString() + "时") : '0' + i + "时")
    }

    //当天剩余分钟
    let minute = this.minuteFormat()
    let currentminute = []
    for (var i = minute; i < 60; i++) {
      currentminute.push(i > 9 ? (i.toString() + "分") : '0' + i + "分")
    }

    let columnsDate = [{
        values: arr,
        className: 'column1'
      },
      {
        values: currenthour,
        className: 'column2'

      },
      {
        values: currentminute,
        className: 'column2'

      }
    ]
    return columnsDate
  },
  getchooseDay(dayNum) {
    var day = new Date();
    var dateArr = []
    for (var i = 0; i < dayNum; i++) {
      var newDate = new Date(new Date().getTime() + i * 1000 * 60 * 60 * 24)
      var year = newDate.getFullYear()
      var month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(newDate.getMonth()) + 1)
      var day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate()
      var fullDate = `${year}-${month}-${day}`
      dateArr.push(fullDate)
    }
    return dateArr;
  },

//获取几月几号星期几
 dateFormat(value) {
    let d = new Date(value);
    let month = d.getMonth() > 8 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
    let date = month + '/' + d.getDate() + '/' + this.getdaytext(d.getDay())
    let time = date
    return time;
  },


//获取小时
  hourFormat() {
    let d = new Date()
    let hour = d.getHours()
    return hour
  },


//获取分钟
  minuteFormat() {
    let d = new Date()
    let minute = d.getMinutes()
    return minute
  },


//获取星期
 getdaytext(weekNum) {
    let week = "";
    switch (weekNum) {
      case 0:
        week = "周日";
        break;
      case 1:
        week = "周一";
        break;
      case 2:
        week = "周二";
        break;
      case 3:
        week = "周三";
        break;
      case 4:
        week = "周四";
        break;
      case 5:
        week = "周五";
        break;
      case 6:
        week = "周六";
        break;
    }
    return week;
  },

//绑定事件 改变赋值
onChangeDate(event) {
    const { picker,value} = event.detail; //将需要的值解构出来
 
    let currentyear = this.data.arrdate[this.data.arrdate.length - 1].split("-")[0] 
    // currentyear  这一步是将年份加上以便判断 如果上面第一列加了年份 就不用这一步
    let currentmonth = value[0].split("/")[0]
    let currentday = value[0].split("/")[1]
    let currenthour = value[1].replace("时", "") //获取 月份 天 小时 也是为了判断下一级如何变化


    let d = new Date();
    var year = d.getFullYear()
    let month = d.getMonth() > 8 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
    var date = d.getDate() >= 10 ? new Date().getDate() : '0' + new Date().getDate()
    let hour = d.getHours()
    let currenttimedate = currentday > date ? currentday : date




    if (currentyear > year || currentmonth > month || currentday > date) {
    // 如果选的不是今天并且 年份 || 月份 || 天 都大于今天 那就要 时 分 分别为 0-23 0-59
      let hourarr = []
      for (var i = 0; i < 24; i++) {
        hourarr.push(i > 9 ? (i.toString() + "时") : '0' + i + "时")
      }
      let minarr = []
      for (var i = 0; i < 60; i++) {
        minarr.push(i > 9 ? i.toString() + "分" : '0' + i + "分")
      }
      
      ** 重点 ！！！！！！！！！！！！！！！！！！！！**
      
      picker.setColumnValues(1, hourarr); //设置 columnsDate 索引为 1 （第二列）的数组对象 
      picker.setColumnValues(2, minarr); //设置 columnsDate 索引为 2 （第三列）的数组对象

      ** 重点 ！！！！！！！！！！！！！！！！！！！！**

    } else if (currenthour > hour) {
    // 当选择的小时大于现在的小时 也该设置选择分钟为 0-59
      let minarr = []
      for (var i = 0; i < 60; i++) {
        minarr.push(i > 9 ? i.toString() + "分" : '0' + i + "分")
      }
      ** 重点 ！！！！！！！！！！！！！！！！！！！！**
      
      picker.setColumnValues(2, minarr);
      
      ** 重点 ！！！！！！！！！！！！！！！！！！！！**
      
    } else {
      // 其它情况就是 选择今天 就写剩余的小时和分钟
      let currenthour = []
      for (var i = new Date().getHours(); i < 24; i++) {
        currenthour.push(i > 9 ? i.toString() + "时" : '0' + i + "时")
      }
      let currentmin = []
      for (var i = new Date().getMinutes(); i < 60; i++) {

        currentmin.push(i > 9 ? i.toString() + "分" : '0' + i + "分")
      }
     ** 重点 ！！！！！！！！！！！！！！！！！！！！**
      
      picker.setColumnValues(1, currenthour); //设置 columnsDate 索引为 1 （第二列）的数组对象 
      picker.setColumnValues(2, currentmin); //设置 columnsDate 索引为 2 （第三列）的数组对象

      ** 重点 ！！！！！！！！！！！！！！！！！！！！**
    }


// 重点！！！！！！！！！！！！！！！！！！！！！！！！！！！！如下 currentminhou 
    let currentminhou = year + '/' + month + '/' + currenttimedate 
    + ' ' + picker.getValues()[1].replace("时", "") + 
    + ":" + picker.getValues()[2].replace("分", "")
    console.log(currentminhou) // 这一步非常重要 issue上 有人提过 开始以为是bug 
    // 就是 改变第一个列的数据 第二列 第三列拿到的数据不对 拿到的是上一次改变的值
    // 其实不是bug 这个组件就是 返回上一次 选中的值 要想获取实时改变的值 就要用到官方组件给出的方法
    // 使用 picker.getValues() 代替 change 自带的 value 参数 value参数只有用户自己去滑动改变才能获取正确的值

    this.setData({
      FormatAllDatechange: currentminhou
    })
  },
//确认选择时间
 confirmchooseTime() {
    if (!this.data.FormatAllDatechange) {
    // 没有选中时间 也得给个默认值
      this.setData({
        show: false,
        FormatAllDate: FormatAll(new Date().getTime())
      })
    } else {
    // 有选中值就得 赋值 currentminhou
      this.setData({
        show: false,
        FormatAllDate: this.data.FormatAllDatechange
      })

    }
  },


//取消选择时间 要给个默认时间
  onConfirmDate(e) {
    this.setData({
      show: false,
      FormatAllDate: FormatAll(new Date().getTime())

    })

  },
  
})

其实并不难 ，但是觉得很麻烦 很多要避的坑；

总结：

1. 不显示取消按钮 定位到取消按钮 直接display : none、将确认文字改成 " ×" 并绑定函数
2. column 数组肯定要重组 三列就写 三个数组对象
3. 第一列整好 再去设置第二三列 setColumnValues( column的index索引, 你要赋予第几列的值 )
   4. 不能直接使用change函数自带的参数获取当前选中的值 要用 picker.getValues() 代替 （重 点！）