移動端日曆組建使用方法

安裝

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>

效果展現

這個使用時點擊按住滑動的哦