1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vant日期选择器使用

vant日期选择器使用

时间:2023-12-09 10:54:18

相关推荐

vant日期选择器使用

vant日期选择器使用

最近遇到个需求就是日期选择只要月,日,时,分,居然不要年份,我懵了,我不会呀,咋办,经过几近波折,也问了好多同,还是得做呀,终于功夫不负有心人(呜呜呜,太不容易了)

看下效果吧

咱也不说啥,干脆点,直接上代码吧

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。