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

解决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
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值