微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）

微信小程序----日期时间选择器（自定义精确到分秒或时段）（MUI日期时间）

声明

bug：由于此篇博客是在bindcolumnchange事件中做的值的改变处理，因此会出现当你选择时，没有点击确定，直接取消返回后，会发现选择框的值依然改变。
造成原因：这一点就是由于在bindcolumnchange事件做的值改变处理造成。
处理方法：如果需要确定后再改变值，请将bindcolumnchange事件中的处理操作放到bindchange事件中。
感谢：感谢qq_41906890指出的问题！

下载

DEMO下载

效果图

实现原理

利用微信小程序的picker组件的多列选择器实现！

WXML

<view class="tui-picker-content">
  <view class="tui-picker-name">时间选择器（选择时分）</view>
  <picker mode="time" value="{
      {
      time}}" start="09:00" end="17:30" bindchange="changeTime">
    <view class="tui-picker-detail">
      午饭时间: {
      {
      time}} 
    </view>
  </picker>
</view>

<view class="tui-picker-content">
  <view class="tui-picker-name">日期选择器（选择年月日）</view>
  <picker mode="date" value="{
      {
      date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
    <view class="tui-picker-detail">
      国庆出游: {
      {