1、vue 项目中 安装日历插件(vue-calendar-component):
npm i vue-calendar-component --save
2、在vue文件中使用,如在calendar.vue文件中创建日历:
<template>
< Calendar v-on:choseDay ='clickDay' v-on:changeMonth='changeDay' v-on:isToday='clickToday' >< /Calendar>
</template>
<script>
import Calendar from 'vue-calendar-component';
export default{
components:{
Calendar
}
methods:{
//选中某天
clickDay(data){
this.$message.info('您选中的日期是'+data);
},
//左右切换月份
changeDay(data){
this.$message.info('您选中的月份是'+data.slice(5,6));
},
//选中的是今天
clickToday(data){
this.$message.info('今天是'+data);
}
}
}
</script>