vant日期选择器使用

た入场券 2023-01-15 12:25 702阅读 0赞

## vant日期选择器使用 ##

最近遇到个需求就是日期选择只要月，日，时，分，居然不要年份，我懵了，我不会呀，咋办，经过几近波折，也问了好多同，还是得做呀，终于功夫不负有心人（呜呜呜，太不容易了）  
看下效果吧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70]  
咱也不说啥，干脆点，直接上代码吧

// currentDate: new Date() 当前日期
    <van-datetime-picker v-if="showPicker" v-model="currentDate" type="datetime"
     title="自定义列排序" :columns-order="['month', 'day','hour','minute']"
     :formatter="formatter" @confirm="confirmData" />

格式化日期时间：

formatter(type, val) { 
            if (type === 'month') { 
              return val;
            }
            if (type === 'day') { 
              return val;
            }
            if (type === 'hour') { 
              return val.concat("时");
            }
            if (type === 'minute') { 
              return val.concat("分");
            }
          },
    	 // 时间格式化
          timeFormat(time) { 
            let month = time.getMonth() + 1;
            let day = time.getDate();
            let hour = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();
            return month + '月' + day + '日' + hour + '时' + minute + '分'
          },
       	 // 选择的确定按钮
    	confirmData(value) { 
            this.currentDate = this.timeFormat(value);
            console.log(this.currentDate, "选中值")
            this.showPicker = false
          },

OK，就这么多了，看着简单，但是也真的难搞，所以记录一下  
另外有个重点，当去电年份以后会后个空白处，这个空白处也是一大坑呀（抓狂了），  
最终解决方法是css，想不到吧，其实很简单，我也是通过试了好几种方法才搞出来的（呜呜呜）  
重点来了，请注意：

.van-picker__columns { 
        width: 120% !important;
      }

哈哈哈，就这一句，简单吧，哇偶

完

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTk1ODMx_size_16_color_FFFFFF_t_70]: /images/20221022/566eab2f8d28452186d50365b4f64017.png