vue2.0+Vant-ui的日期选择器type

前段时间搞了个公众号,我用的Vant-ui,Vant官方网站,毕竟是有赞团队开发的,项目需求有个地方用到日历,这个组件:

<van-datetime-picker
  v-model="currentDate"
   :type="dateType"
   @cancel="showPickerTime = false"
   @confirm="onConfirm"
   :formatter="formatter"
 />

里面主要说明两个属性:typeformatter,为什么要单独说,因为项目需要,有日、月、年三个选项,而官方文档上type的说明:
官方截图
有日,有月,没有年。。。
于是二话不说就开始研究啊,咦,有个formatter属性很有意思,大家想必都知道,在各种组件上面,这个属性就代表可以修改格式啊,官方操作看一波:
在这里插入图片描述

formatter(type, value) {
   if (type === 'year') {
     return `${value}年`;
   } else if (type === 'month') {
     return `${value}月`;
   }
   return value;
 }

哈哈,这一看就明白,在用户选择这种日期类型,type=date
在用户选择这种日期类型,type=year-month
在用户选择这种日期类型,type=year-month
月和年是被迫一样的,因为只有这个,然后是重点:

formatter (type, value) {
     if (this.dateActive == 0) {   // 日
         if (type === 'year') {
             return `${value}`
         } else if (type === 'month') {
             return `${value}`
         }
         return value;
     } else if (this.dateActive == 1) {   // 月
         if (type === 'year') {
             return `${value}`
         } else if (type === 'month') {
             return `${value}`
         }
         return value;
     } else if (this.dateActive == 2) {    // 年
         if (type === 'year') {
             return `${value}`
         } else if (type === 'month') {
             return ``     // 重点就是这里,把‘月’给返回空字符串
         }
         return value;
     }
 },

到这里,日历就可以按照日、月、年展示了:
日:
在这里插入图片描述
月:
在这里插入图片描述
年:
在这里插入图片描述
emmmmm,看见问题了吗,年后面的这片空白。

做人,最重要的是开心嘛,der
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值