0
点赞
收藏
分享

微信扫一扫

解决Vant Weapp的 van-datetime-picker组件在使用了filter属性后,默认值获取不到展示值

洛茄 2022-04-14 阅读 96

解决Vant Weapp的 van-datetime-picker组件在使用了filter属性后,默认值获取不到展示值,比较笨的方法



van-datetime-picker组件
如上图,点击展开时间选择后,由于使用了filter属性,分钟数是指定了可选范围,此时不去滑动列表触发change事件,那么得到的时间就不为所展示的时间。

index.wxml

  <van-popup 
  	show="{{ showDatePicker }}"
  	position="bottom" 
  	bind:close="hiddenDatePickerView" 
  	custom-style="height: 300px;"
  >
  	<van-datetime-picker
  	  type="datetime"
  	  value="{{ currentSelectDate }}"
  	  min-date="{{ startDate }}" 
  	  max-date="{{ endDate }}"
  	  bind:confirm="selectDateTime" 
  	  bind:cancel="hiddenDatePickerView" 
  	  filter="{{ dateFilter }}" 
  	  formatter="{{ dateFormatter }}"
  	 />
  </van-popup>

index.js

Page({
  data: {
    showDataPicker: false,
    startDate: +new Date(),
    endDate: dayjs().add(1, 'month').valueOf(),
    currentSelectDate: null, // 存放当前所选时间
    _options: [0, 15, 30, 45], // 同下面dateFilter取的间隔一致,若dateFilter更改,此处对应更改 

    dateFilter(type, options) {
      if(type === 'minute) {
        return options.filter(( options ) => options % 15 === 0);
      }
      return options;
    }, 
    dateFormatter(type, value) {
      if (type === 'year') {
        return `${value}`;
      }else if (type === 'month') {
        return `${value}`;
      }else if (type === 'day') {
        return `${value}`;
      }else if (type === 'hour') {
        return `${value}`;
      }else if (type === 'minute') {
        return `${value}`;
      }
      return value;
    },
  }, // data 结束

  // 弹出层关闭
  hiddenDatePickerView() {
    this.setData({ showDatePicker: false })
  },

  // 处理所选时间
  selectDateTime(e) {
    let that = this;
    let systemTime = moment(e.detail).minutes(); // 获取当前系统时间的分钟数
    const { _options } = that.data;

    // 解决展开弹出层后,不滑动触发change事件,直接点击确定,获取到所展示的时间
    for(let i = 0; i < _options.length; i++) {
      if(i !== 3) {
        if(_options[i] < systemTime && systemTime <= _options[i + 1]) {
          that.setData({
            currentSelectDate: +moment(moment(e.detail).minute(_options[i + 1])),
            showDatePicker: false,
          })
        } else if(systemTime === 0) {
          that.setData({
            currentSelectDate: +moment(moment(e.detail).minute(_options[0])),
            showDatePicker: false,
          })
        } else if(45 < systemTime) {
           that.setData({
            currentSelectDate: +moment(moment(e.detail).minute(60)),
            showDatePicker: false,
          })
        }
      }
    }
  }
})

这样子currentSelectDate的值在默认情况下就能够取到所展示的值。

举报

相关推荐

0 条评论