How to use the mobile calendar

Install

npm i vue2-datepick --save

initialization (main.js)

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

Instructions

< template > 
  < div id ="integral" > 
      < p @click = "setDate"  > Click to set date (default today) </ p > 
      < p > selected time{{date}} </ p > 
      < p @click = "setDate2"  > set the specified date (2010-3-2) </ p > 
      < p > selected time{{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,   // initialization time 
        onOk:(e)=> {
           this .date2 = e;
        },
      })
    },
  },
}
</script>

Show results

When using this, tap, hold and slide

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325077730&siteId=291194637