ow-calendar

安装

NPM

npm i ow-calendar -S

YARN

yarn add ow-calendear

使用方法

全局引用

import Vue from 'vue';
import owCalendar from 'ow-calendar';

Vue.use(owCalendar);

组件内引用

在组件内

import owCalendar from 'ow-calendar/src/lib/ow-calendar';

export default {
  components: {
    owCalendar,
  },
};

Api

props

属性	说明	类型	默认值
show-month-numbers	要展示多少个月份	Number, String	12
start-date	开始的日期	Date	今天
disabled-date	不可选的日期	Array	无
multiple	开启多选模式	Boolean	false
transition	过渡效果	String	pop-fade
need-choice-days	至少选择的天数,与 multiple 配合使用	Number,String	0
max-choice-days	最多选择天数,与 multiple 配合使用	Number,String	15
info-text	提示文案,与 need-choice-days 配合使用	String	当选择的日期小于 need-choice-days 所设置时: 文案显示:请至少选择 needChoiceDays 天 needChoiceDays - 1 晚 当选择的日期大于等于 need-choice-days 所设置时:无文案
format-type	显示的日期格式		yyyy/MM/dd ps:月份需要大写

Event:

事件名	说明	返回值
confirm	点击保存时触发	单选模式下:只有一个 Date; 多选模式下: 开始时间,结束时间,选择的天数
multiple-choice-end	选完第二个日期时触发(可在此处修改 info-text)	同上
close	弹窗关闭时触发	无

DEMO 演示

本地预览

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build