vue时间插件-来自于三人行慕课

原文链接：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的时候 是周日开始

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日历头部的文字，默认是 [ ‘日’,‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’] ，可以根据自己的需求进行不同的修改。—否