原文链接：https://www.3mooc.com/front/articleinfo/187
1. 安装
npm i vue-calendar-component --save
2. template部分
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
// v-on:isToday="clickToday"
// :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
// :markDateMore=arr // 多种不同的标记
// 第一个标记和第二个标记不能同时使用
// :agoDayHide='1514937600' //某个日期以前的不允许点击 时间戳10位
// :futureDayHide='1525104000' //某个日期以后的不允许点击 时间戳10位
// :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始
></Calendar>
3.JavaScript部分
import Calendar from 'vue-calendar-component';
export default {
components: {
Calendar
},
methods: {
clickDay(data) {
console.log(data); //选中某天
},
changeDate(data) {
console.log(data); //左右点击切换月份
},
clickToday(data) {
console.log(data); // 跳到了本月
}
}
}
API
属性说明默认是否必传
choseDay选中某天调用的方法，返回选中的日期 YY-MM-DD无否
changeMonth切换月份调用的方法，返回切换到某月的日期 YY-MM-DD无否
isToday切换月份的时候，如果切到当前月份，调用这个方法，返回当前月今天无否
markDate如果需要某月的几天被标注，传当月的日期数组。如["2018/2/2","2018/2/6"]被会标注（相同的标记）空数组否
markDateMore需要不同的标记如上Usage 最后一行示例代码空数组否
agoDayHide某个日期以前的不允许点击 时间戳长度是 10 位0否
futureDayHide某个日期以后的不允许点击 时间戳长度是 10 位很大否
sundayStart默认是周一开始 当是true的时候 是周日开始false否
textTop日历头部的文字，默认是 [ '日','一', '二', '三', '四', '五', '六'] ，可以根据自己的需求进行不同的修改。---否
网友评论