微信小程序组件 - 时间和单列文字选择器

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序有时需要进行一些时间选择或类型选择，便封装了一些选择器组件，包含月日周时分时间选择器，年月日，年月，年月日时分选择器，单列文字选择器

一、 jh-time-picker

月日周时分时间选择器，不显示年份，主要针对近期时间进行选择

wxml

<jh-time-picker id='JhTimePicker' isShow='{
    
    {isShowPopView2}}' title="请选择时间" bind:confirm='confirm1'>
</jh-time-picker>

js

  confirm1: function (event) {
    
    
    let dict = event.detail
    console.log(dict.time);
    console.log(dict.timeStamp);
    // 转成需要的格式
    let newTime = TimeUtils.Jh_timeStampToTime(dict.timeStamp, '{y}-{m}-{d} {h}:{i}:{s} 星期{w}')
    console.log(newTime);
    this.setData({
    
    
      currentDateStr1: dict.time,
    });
  },

二、jh-ymd-time-picker

支持年月日、年月，年月日时分，三种类型选择器，可设置最大时间和最小时间，选中时间

默认类型为年月日，设置选中时间

<jh-ymd-time-picker isShow='{
    
    {isShowTimePicker}}' selectTime="2020-02-02" bind:confirm="onConfirm">
</jh-ymd-time-picker>

设置类型为年月，设置选中时间

<jh-ymd-time-picker isShow='{
    
    {isShowTimePicker2}}' selectTime="2020-06" timeType="ym" bind:confirm="onConfirm">
</jh-ymd-time-picker>

设置类型为年月日时分，设置选中时间

<jh-ymd-time-picker isShow='{
    
    {isShowTimePicker3}}' selectTime="2019-03-20 18:50" timeType="all"
  bind:confirm="onConfirm">
</jh-ymd-time-picker>

设置最小时间，设置选中时间

<jh-ymd-time-picker isShow='{
    
    {isShowTimePicker4}}' selectTime="2020-08-02" minDate="{
    
    {minDate}}"
  bind:confirm="onConfirm">
</jh-ymd-time-picker>

设置最大时间，设置选中时间

<jh-ymd-time-picker isShow='{
    
    {isShowTimePicker5}}' selectTime="2020-02-02" maxDate="{
    
    {maxDate}}"
  bind:confirm="onConfirm">
</jh-ymd-time-picker>

确认方法回调

 //点击选择器的 确定，返回的是时间戳
  onConfirm(event) {
    
    
    let time = JhTime.Jh_timeStampToTime(event.detail, '{y}年{m}月{d}日 {h}:{i}:{s} 星期{w}');
    console.log("点击确定 选择的时间 - " + time);
    this.setData({
    
    
      currentDate: event.detail,
      currentDateStr: time
    });
  },

三、jh-string-picker

单列文字选择器，可设置默认选中项，数据类型为数组对象，对象里面的格式自定义，最终选择的是某列对应的对象数据

wxml

<jh-string-picker dataArr='{
    
    {stringPickerDataArr}}' selectIndex='1' isShow='{
    
    {isShowPicker}}' title="请选择"
  bind:confirm='confirm1'>
</jh-string-picker>

JS

  data: {
    
    
    isShowPicker: false,
    // 对象数组 参考格式（不一定非要用name和id）
    stringPickerDataArr: [{
    
    
      name: "一般",
      id: "0"
    }, {
    
    
      name: "严重",
      id: "1"
    }]
  },
  //点击选择器的 确定
  confirm1: function (event) {
    
    
    let dict = event.detail
    console.log(dict);
  },