VantUI时间选择器

​ 距离我上一次博客都距离五个多月了，证明我这五个月没有好好学习，自我反省下。

​ 这次写这个博客，是我工作中遇到的问题，项目是做一个h5移动端的商城。之前没用过VantUI，拿到需要用到时间选择器的时候也是捉摸了一会。

​ 大概需求是，点击弹出时间选择器，并显示时间到页面上。

​ 一开始看文档的时候也没太仔细，没看到前面的一句话时间选择组件通常与弹出层组件配合使用。如果直接按需导入，时间选择器会直接出现在页面上。

引入

​ 这里采用的按需导入。

import { Popup } from 'vant';
import { DatetimePicker } from 'vant';

Vue.use(Popup)
Vue.use(DatetimePicker);

主要代码

1. 需求主要是实现年月日的选择，type="date"，由于页面时间选择器较多（需求有四个）所以我只写了一个弹出层，选择器全部放弹出层里，通过 v-if 控制显示与隐藏

2. 开始时间不能高于当前日期，:max-date="currentTime"

3. 结束时间不能低于开始日期，:min-date="startTime"

4. cancel、confirm 为 vantUI 时间选择器提供的事件，点击取消或确认按钮触发事件，其中 confirm 有个回调参数 value 为当前选择的时间

5. 将弹出层组件套在时间选择器的组件外面，进行组合使用，需要手动在取消、确认按钮上加事件隐藏弹出层

6. formatter 调用的官方文档的formatter方法，会将选项文字进行格式化处理，如下图所示，左边是调用后的效果
   

   

​ 我这里只放了一部分代码

展示效果

按钮

1561472584970.png

时间选择器

1561472599881.png

显示时间

1561472614115.png

总结

​ 表示自己还是个小菜鸟，欢迎各路大神指点和探讨。

timg.jpg