Vue 用Vant实现时间选择器

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker

2. 引入Vant中DatetimePicker组件（全局引入后可直接使用）

import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);

3. 关键使用代码（结合vant组件Popup的底部弹出层一起使用）

      
    

export default {
  data() {
    return {
     dateShow: false,
      currentDate: new Date()
    };
  }
}

4. 效果图

   
   
   

   1EFF4029-6CFC-4A2B-9406-C67C7BE1DA0D.png

5. 实现点击确定 和取消的方法

handleCancel () {
      this.dateShow = false;
    },
    //开始时间
    handleEndDateConfirm () {
      this.dateShow = false;
      this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
    },