[移动开发]微信小程序 时间选择

微信小程序做时间选择器用到两种方法

方法一：使用Vant Weapp中的DatetimePicker

原始样式和加了formatter后的样式：

<view style="flex: 1;">
     <view bindtap="alertDate">结束时间</view>
</view>

<van-datetime-picker wx:if="{{showDate}}" type="date" value="{{date}}" catchtouchmove='true'
    bind:input="onInput" formatter="{{ formatter }}" style="position: absolute; width: 100%; bottom: 0;"></van-datetime-picker>

alertDate() {
    this.setData({
      showDate:true
    })
  },
onInput(options) {
    console.log('onInput',options);
  },

data: {
    date: new Date().getDate(),
    showDate:false,
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      if(type === 'day') {
        return `${value}日`;
      }
      return value;
    },
  },

每调一次弹出框里的年或月或日，onInput都会执行一次。弹出日期选择框后，并没有默认显示date的日期

方法二：使用小程序原生的picker

<picker mode="date"  fields="year" class="datePicker" value="{{date}}" bindchange="bindChange">结束时间</picker>

?fields:有效值 year,month,day，表示选择器的粒度,当为month时，只显示年月

bindChange(options) {
    console.log('bindChange',options);
  },

date: new Date().getDate(),

页面上初始并不显示picker选择器，但会显示"结束时间",点击文字，弹出日期选择框。弹出选择框后默认显示的是date设定的日期

两种方法的区别：

1。样式，第一种方法加了formatter后的样式与第二种方法相同；

2。第二种方法，日期选择框默认显示date设定的日期，但第一种方法还是显示默认值；

3、第一种每切换一次选择框里的数值，onInput就会触发一次，并且得到的detail里的值是时间戳的形式，需要转化处理，第二种方法只有在点了弹出框的确认按钮时，bindChange方法才会触发。得到的detail值是"2022-05-19"的形式

阅读世界，共赴山海

423全民读书节，邀你共读