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

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

完

vant日期选择器使用相关推荐

【iOS】自定义日期选择器
自定义了一个日期选择器,与大家分享一下,期待宝贵建议. github下载地址:https://github.com/huahua0809/XHDatePicker 下面只是说明一下怎么用,具体实现请下 ...
flutter 类似日期选择器控件_一切皆组件的Flutter，安能辨我是雄雌
从一开始接触Flutter,相信读者都会铭记一句话,那就是--一切皆组件.今天我们就来体会一下这句话的神奇魔力,我们先从实际的产品需求说起. 我们先来看一个简化的运行图: 我们要实现如上图所示的日期选 ...
java下拉列表选日期_iPhone应用程序：日期选择器查看下拉列表
当我在文本字段中"触及"时,我用它来弹出日期选择器视图 . 也就是说,我需要文本字段来显示我在日期选择器视图中选择的内容作为其内容 . 在选择所需日期/时间后单击"完成& ...
ElementUI 中日期选择器总结
elememtUI日期选择器 <el-date-pickerv-model="value1"type="datetime"placeholder=&quo ...
Android中DatePicker日期选择器的使用和获取选择的年月日
场景实现效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现将布局改 ...
疯狂ios讲义疯狂连载之日期选择器（UIDatePicker）
UIDatePicker是一个可以用来选择日期和时间的控件.除此之外,它也可作为倒计时控件. 日期选择器(UIDatePicker)继承了UIControl,因此UIDatePicker可以作为活动控 ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
axure日期选择器控件_JavaFX 控件 - 输入（Control - Inputs）
本章重点内容介绍JavaFX常用输入控件,从 GitHub 或 Gitee下载详细demo代码. 按钮.单选框.复选框等适用范围根据官方文档 javafx.scene.control 编写,适合 ...
Angular中修改第三方组件的样式 - zorro日期选择器右端不对齐的BUG
在一列上同时使用zorro的日期选择器和input组件会出现右端不对齐的BUG(nzSpan设置为一样) 上图中3个表单项:单据日期.开票.交货方式,nzSpan数值是一样的,可以看到日期选择器和下面 ...

vant日期选择器使用

vant日期选择器使用

vant日期选择器使用相关推荐

最新文章

热门文章