// js file import 'vue2-slot-calendar/lib/calendar.min.css'; import calendar from 'vue2-slot-calendar/lib/calendar'; // vue file // in ES6 modules import Calendar from 'vue2-slot-calendar'; // in CommonJS const Calendar = require('vue2-slot-calendar'); // in Global variable const VueCalendar = Calendar;
直接引用编译好的js文件（推荐）
<link href="https://www.jb51.net/lib/calendar.min.css" > <script src="https://www.jb51.net/lib/calendar.min.js"></script>
多语言支持
系统提供window.VueCalendarLang 勾子函数来让用户自定义语言，
window.VueCalendarLang=function(lang){ return {}; //对象必须是下面JSON格式 };
上面勾子函数返回的必须是下面格式的JSON对象。
下面的脚本在 /src/lang/zh-CN.js 中有
{ daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"], limit: "超过限制 (最多{{limit}}项)", loading: "加载中...", minLength: "最小长度", months: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一", "十二" ], notSelected: "未选择", required: "必填项", search: "查找" }
构建步骤
# 安装依赖 npm install # 运行开发服务器 localhost:4000 npm run dev # 编译（压缩JS和CSS等） npm run build # 单元测试 npm run unit # 运行所有测试 npm test
参数和事件
Name
Type
Default
Description
value
String
''
组件输入输出的值，即 v-model 的值
width
String
'200px'
input文本框的宽度
format
String
yyyy-MM-dd
日期格式,可用值： d, dd, M, MM, MMM, MMMM, yyyy.
disabled-days-of-week
Array
每周有哪些天禁用，可用值0-6，多个值则用逗号隔开
clear-button
Bollean
false
是否显示清除按钮，显示清除按钮时右侧的日历图标不显示，不显示清除按钮时则显示日历图标
placeholder
String
文本框中显示的水印
hasInput
Boolean
true
是否显示文本框
pane
Number
1
日历面板数量，默认1，双月日历设为2即可，目前仅支持1和2
borderWidth
Number
2
日历面板边框线宽度
onDayClick
Function
点击日期时的事件，已改为不受hasInput值的限制，总是触发
specialDays
Object
特殊日期
changePane
Function
切换日历面板时的事件, 暂时还没研究这个，大多数情况下用不到，请参考 /src/modules/Docs.vue
rangeBus
Function
暂时不明白啥意思，请总是返回一个 new Vue() 就对了
rangeStatus
Number
0
日期范围状态，默认0表示不使用日期范围，1表示双日历联动的起始日期，2表示双日历联动的结束日期
onDrawDate
Function
绘制日期时的事件，可以让用户自定义日历样式
showDateOnly
Boolean
false
是否只显示日历面板
transfer
Boolean
false
是否将日历面板添加到 document.body中
elementId
String
日历ID
firstDayOfWeek
Number
0
每周第1天，0表示星期天，1表示星期一，其它依次类推
组件的所有属性值