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

需求是日期选择具体到上下午
依赖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

最后自己处理一下就行

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容