小程序 从底部弹出时间选择

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

需求：小程序 从底部弹出时间选择 要求的效果是如图所示：

思路

需要两个数组就可以显示这个东西：第一个数组是包含所有我们要显示的信息，第二个数组是我们所选择下标信息的索引值 如果不理解这句话就看下面的实现过程：

• 要想日期从底部弹出 可以使用Picker组件（）(从底部弹起的滚动选择器) 从官方文档可知我们要从底部弹出一个 时间选择器 需要的是多列选择器 ，而对于不同的mode，picker拥有不同的属性

因此 如果要选择器显示不同的内容 最主要修改的就是大数组中的内容即range这个数组中的内容 这才是重点！！！！

• 那么首先 range传入的是数组型 格式应该是：[[] [] []] ，从目前的需求来看，在这个大数组下面包含三个小数组，第一个小数组的内容就应该是（日期加周几），第二个小数组是具体哪一小时，第三个小数组是具体的分钟数。这里有三列，则这个时间选择器就弹出多少列(这里弹出的是三列)

例如选择（2021-01-15 周五） （02点） （20分） 那value(第二个数组)这个数组的值[1, 2, 2],这里的1，2，2是所选择的值在第一个大数组中每个小数组的索引值。当我们触发这个选择器的时候 当选择确定 就会改变value中数组的下标值 从而修改我们显示的数据 如下为第一个大数组中的数据：

主要代码

展示的页面

  <view class="bottom-item-left">时间选择(未处理)：</view>
  <picker class="bottom-item-right" mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime1" range="{{dateTimeArray}}">
    <view >
        <block wx:if="{{showtime == null}}">
         <input placeholder="请选择乘车时间"/> 
      </block>
      <block wx:else>
         <input placeholder="请选择乘车时间"    value="{{showtime}}"/> 
      </block>
    </view>
  </picker>
</view>
<view class="bottom-item">
  <view class="bottom-item-left">时间选择(处理后)：</view>
  <view class="bottom-item-right">
   {{cartime}}
  </view>
</view>

JS代码

var dateTimePicker = require('../../utils/dateTimePicker.js');
/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
//获取当前时间
var timestamp = Date.parse(new Date());
var date = new Date(timestamp);
 
// 获取完整的年月日 时分秒，以及默认显示的数组
var obj1 = dateTimePicker.dateTimePicker(30, date);
console.log("obj1",obj1);
this.setData({
  dateTimeArray: obj1.dateTimeArray,
  dateTime: obj1.dateTime,
});
},
//当触发选择时间得时候
changeDateTime1(e) {
  this.setData({ dateTime: e.detail.value });
  console.log("dateTime",this.data.dateTime);
  var changeTime = this.data.dateTimeArray[0][this.data.dateTime[0]]+" "+this.data.dateTimeArray[1][this.data.dateTime[1]]+" "+this.data.dateTimeArray[2][this.data.dateTime[2]];
  console.log("changeTime",changeTime);
  var times = changeTime.split(" ");
    var time =  times[0]+" "+times[2].substring(0,2)+":"+times[3].substring(0,2)+":00";
    this.setData({
    cartime: time,
    showtime: changeTime
    })
},

具体的代码可以查看：gitee.com/childrens_1…

总结

在微信小程序中 实现日期选择 这里分享的是通过数组的方式，主要利用微信原生写的 当然 通过数组的选择是比较不灵活的 他的日期选择范围是有限的 但是他的组合显示是比较灵活的 所以要根据具体情况选择合适的日期插件