demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

JhTimePicker.gif

demo代码：

js 代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShowPopView2:false,
    currentDateStr1:'',
    currentDateStr2: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("生命周期函数--监听页面加载 ");

    wx.setNavigationBarTitle({
      title: '月日周时分 - 时间选择器'
    })
  },

  ClickTimeBtn1: function () {
    this.setData({
      isShowPopView2: true,
    });
  },
  confirm1: function (event){
    console.log(event.detail);
    this.setData({
      currentDateStr1: event.detail,
    });
  },

  ClickTimeBtn2: function () {
    var picker = this.selectComponent('#JhTimePicker2');
    picker.showPicker();
  },
  confirm2: function (event) {
    const picker = this.selectComponent('#JhTimePicker2');
    this.setData({
      currentDateStr2: picker.getTime(),
    });
  },

})

json 代码：

{
  "usingComponents": {
    "JhTimePicker":"../../../../JhTools/JhTimePicker/JhTimePicker"
  }
}

wxml 代码：

<view class="text">根据属性 弹出 </view>
<JhTimePicker id='JhTimePicker' isShowPopView='{{isShowPopView2}}' title="请选择时间" bind:confirm='confirm1'> </JhTimePicker>
<view class="timeView" bindtap="ClickTimeBtn1"> 选时间1 </view>
<view class="time2">选中的时间： {{currentDateStr1}}</view>



<view class="text">根据方法 弹出 </view>
<JhTimePicker id='JhTimePicker2' bind:confirm='confirm2'> </JhTimePicker>
<view class="timeView" bindtap="ClickTimeBtn2"> 选时间2 </view>
<view class="time2">选中的时间： {{currentDateStr2}}</view>

wxss 代码：