移动端日历组建使用方法

安装

npm i vue2-datepick --save

初始化（main.js）

import Calendar from 'vue2-datepick';
Vue.use(Calendar);

使用方法

<template>
  <div id="integral">
      <p @click = "setDate" >点击设置日期（默认今天）</p>
      <p>选中的时间{{date}}</p>
      <p @click = "setDate2" >设定指定的日期（2010-3-2）</p>
      <p>选中的时间{{date2}}</p>

  </div>
</template>

<script>
export default {
  name: 'integral',
  data(){
      return{
          date:'',
        date2:'2010-3-2'
        }
  },
  methods:{
    setDate(){
      this.$picker.show({
        type:'datePicker',
        onOk: (date) =>{
          this.date = date
        }
      });
    },
    setDate2(){
      this.$picker.show({
        type:'datePicker',
        date:this.date2,  //初始化时间
        onOk:(e)=>{
          this.date2 = e;
        },
      })
    },
  },
}
</script>

效果展示

这个使用时点击按住滑动的哦