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

朴灿烈づ我的快乐病毒、 2023-06-24 04:51 326阅读 0赞

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

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

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

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;
         }
     },

到这里，日历就可以按照日、月、年展示了:  
***日：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
***月：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
***年：***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
emmmmm，看见问题了吗，年后面的这片空白。

做人，最重要的是开心嘛，der  
![在这里插入图片描述][20191213171014492.png_pic_center]

[Vant]: https://youzan.github.io/vant-weapp/#/datetime-picker
[20191220163803417.png]: https://img-blog.csdnimg.cn/20191220163803417.png
[20191220164145911.png]: https://img-blog.csdnimg.cn/20191220164145911.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191220165024669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191220165117421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191220165242314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[20191213171014492.png_pic_center]: https://img-blog.csdnimg.cn/20191213171014492.png#pic_center