美文网首页
vant 实现弹窗选择 年月日上下午

vant 实现弹窗选择 年月日上下午

作者: AAA前端 | 来源:发表于2022-10-18 17:26 被阅读0次

    需求是日期选择具体到上下午
    依赖vant组件实现

        <van-datetime-picker v-model="currentTime" type="datehour" :filter="filter" @confirm="confirm" ref="mytest"/>
    

    datehour 可以选择年月日 小时。 所有需要对小时进行处理

    // 处理获取上下午
    filter(type, options) {
          if (type === 'hour') {
            return ['上午', '下午']
          }
          return options;
        },
    // 由于这个组件filter修改后都是返回的0小时,所有通过ref获取小时那一栏的数据。组合
    confirm(t){
          const i =  this.$refs.mytest.$children[0].$children[0].$children[3]._data.currentIndex
          console.log(i)
          const list = ['上午', '下午']
          console.log(list[i])
          console.log('time', t)
        },
    
    
    image.png

    最后自己处理一下就行

    相关文章

      网友评论

          本文标题:vant 实现弹窗选择 年月日上下午

          本文链接:https://www.haomeiwen.com/subject/crhszrtx.html