1. 查看 Vant 官网 https://youzan.github.io/vant/#/zh-CN/datetime-picker
引入 Vant 中 DatetimePicker 组件 (全局引入后可直接使用)
- import vue from 'vue';
- import {
- DatetimePicker
- } from 'vant'
- Vue.use(DatetimePicker);
关键使用代码 (结合 vant 组件 Popup 的底部弹出层一起使用)
- <van-popup v-model="dateShow" position="bottom">
- <van-datetime-picker v-model="currentDate" type="year-month" @cancel="handleCancel"
- @confirm="handleEndDateConfirm" />
- </van-popup>
- export default {
- data() {
- return {
- dateShow: false,
- currentDate: new Date()
- };
- }
- }
效果图
1EFF4029-6CFC-4A2B-9406-C67C7BE1DA0D.PNG
实现点击确定 和取消的方法
- handleCancel () {
- this.dateShow = false;
- },
- // 开始时间
- handleEndDateConfirm () {
- this.dateShow = false;
- this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
- },
来源: http://www.jianshu.com/p/cac5dea3f092