一，前言
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)永春,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
我是剛學(xué)Vue的菜鳥，在使用過(guò)程中需要用到日歷控件，由于項(xiàng)目中原來(lái)是用jQuery寫的，因此用了bootstarp的日歷控件，但是配合Vue實(shí)在有點(diǎn)蛋疼，不夠優(yōu)雅……
于是網(wǎng)上搜了好久找到了Vue2-Calendar，不用說(shuō)，挺好用的，但是同時(shí)也發(fā)現(xiàn)這個(gè)組件有些問(wèn)題，有些功能挺不符合我們的要求，于是著手改了一版
二，改進(jìn)的功能
在Vue2-Calendar v2.2.4 版基礎(chǔ)上作了優(yōu)化。
1.改進(jìn)原控件無(wú)法切換語(yǔ)言的BUG，支持 lang='zh-CN'和'en'。
2.日歷面板增加一個(gè)位置選項(xiàng)，允許讓面板右對(duì)齊，只需要position=right即可。
3.原 :on-day-click 事件只有在 hasInput=false 時(shí)才生效，現(xiàn)改為一直有效，這樣當(dāng)用戶點(diǎn)擊日歷面板上的日期后就可以觸發(fā)該事件。
4.clear=false時(shí)文本框右側(cè)會(huì)顯示一個(gè)日歷圖標(biāo)，高仿bootstrap的日歷組件，但clear=true時(shí)不顯示
效果圖
三，使用示例
1.常規(guī)使用，單日歷
HTML代碼：
2
JS代碼：
重慶分公司
重慶分公司
var app = new Vue({
el: "#app",
data: function() {
return {
disabled: [], //禁用的日期
value: new Date(), //值
format: "yyyy-MM-dd", //文本框中顯示的日期格式
clear: false, //是否在文本框右側(cè)顯示清除按鈕（X）
placeholder: "日期", //水印
position: "left", //日期面板位置，默認(rèn)null和left 居左，right則靠右
lang: "" //語(yǔ)言，默認(rèn)中文，可選值：zh-CN、en
};
},
methods: {
//鼠標(biāo)點(diǎn)擊日歷面板上的日期時(shí)的事件，
//傳遞的兩個(gè)參數(shù)均是同一個(gè)值，只是類型不同，隨便用哪個(gè)看個(gè)人需要
//date 是 Date 類型
//dateStr 是 String 類型
dayClick: function(date, dateStr) {
console.log(date);
console.log(dateStr);
console.log(this.value);
}
},
components: {
calendar: Calendar
}
});2.常規(guī)使用，雙月日歷
HTML代碼：
2
JS代碼：
var app = new Vue({
el: "#app",
data: function() {
return {
disabled: [], //禁用的日期
value: new Date(), //值
format: "yyyy-MM-dd", //文本框中顯示的日期格式
clear: false, //是否在文本框右側(cè)顯示清除按鈕（X）
placeholder: "日期", //水印
position: "left", //日期面板位置，默認(rèn)null和left 居左，right則靠右
lang: "" //語(yǔ)言，默認(rèn)中文，可選值：zh-CN、en
};
},
methods: {
//鼠標(biāo)點(diǎn)擊日歷面板上的日期時(shí)的事件，
//傳遞的兩個(gè)參數(shù)均是同一個(gè)值，只是類型不同，隨便用哪個(gè)看個(gè)人需要
//date 是 Date 類型
//dateStr 是 String 類型
dayClick: function(date, dateStr) {
console.log(date);
console.log(dateStr);
console.log(this.value);
}
},
components: {
calendar: Calendar
}
});3.雙日歷聯(lián)動(dòng)，通常用在開始和結(jié)束時(shí)間的選擇上，結(jié)束時(shí)間不能早于開始時(shí)間
說(shuō)明：當(dāng)選擇了開始時(shí)間后，結(jié)束時(shí)間選擇時(shí)會(huì)顯示哪些日期可選，并且顯示已經(jīng)選擇的開始時(shí)間
HTML代碼：
2
JS代碼：
var app2 = new Vue({
el: "#app2",
data: function() {
return {
disabled: [],
value: new Date(),
value2: new Date(),
format: "yyyy-MM-dd",
clear: false,
placeholder: "Start Date",
position: "left",
lang: "",
bus: new Vue()
};
},
methods: {
dayClick: function(date, dateStr) {
console.log('value=' + this.value);
console.log('value2=' + this.value2);
},
getBus: function() {
return this.bus;
}
},
components: {
calendar: Calendar
}
});四，參數(shù)說(shuō)明（翻譯的官方文檔）
安裝（需要node支持）
$ npm install vue2-slot-calendar
導(dǎo)入模塊
// 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文件（推薦）
多語(yǔ)言支持
系統(tǒng)提供window.VueCalendarLang 勾子函數(shù)來(lái)讓用戶自定義語(yǔ)言，
window.VueCalendarLang=function(lang){
return {}; //對(duì)象必須是下面JSON格式
};上面勾子函數(shù)返回的必須是下面格式的JSON對(duì)象。
下面的腳本在 /src/lang/zh-CN.js 中有
{
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
limit: "超過(guò)限制 (最多{{limit}}項(xiàng))",
loading: "加載中...",
minLength: "最小長(zhǎng)度",
months: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一",
"十二"
],
notSelected: "未選擇",
required: "必填項(xiàng)",
search: "查找"
} 構(gòu)建步驟
# 安裝依賴 npm install # 運(yùn)行開發(fā)服務(wù)器 localhost:4000 npm run dev # 編譯（壓縮JS和CSS等） npm run build # 單元測(cè)試 npm run unit # 運(yùn)行所有測(cè)試 npm test
參數(shù)和事件
| 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，多個(gè)值則用逗號(hào)隔開 | |
| clear-button | Bollean | false | 是否顯示清除按鈕，顯示清除按鈕時(shí)右側(cè)的日歷圖標(biāo)不顯示，不顯示清除按鈕時(shí)則顯示日歷圖標(biāo) |
| placeholder | String | 文本框中顯示的水印 | |
| hasInput | Boolean | true | 是否顯示文本框 |
| pane | Number | 1 | 日歷面板數(shù)量，默認(rèn)1，雙月日歷設(shè)為2即可，目前僅支持1和2 |
| borderWidth | Number | 2 | 日歷面板邊框線寬度 |
| onDayClick | Function | 點(diǎn)擊日期時(shí)的事件，已改為不受hasInput值的限制，總是觸發(fā) | |
| specialDays | Object | 特殊日期 | |
| changePane | Function | 切換日歷面板時(shí)的事件, 暫時(shí)還沒(méi)研究這個(gè)，大多數(shù)情況下用不到，請(qǐng)參考 /src/modules/Docs.vue | |
| rangeBus | Function | 暫時(shí)不明白啥意思，請(qǐng)總是返回一個(gè) new Vue() 就對(duì)了 | |
| rangeStatus | Number | 0 | 日期范圍狀態(tài)，默認(rèn)0表示不使用日期范圍，1表示雙日歷聯(lián)動(dòng)的起始日期，2表示雙日歷聯(lián)動(dòng)的結(jié)束日期 |
| onDrawDate | Function | 繪制日期時(shí)的事件，可以讓用戶自定義日歷樣式 | |
| showDateOnly | Boolean | false | 是否只顯示日歷面板 |
| transfer | Boolean | false | 是否將日歷面板添加到 document.body中 |
| elementId | String | 日歷ID | |
| firstDayOfWeek | Number | 0 | 每周第1天，0表示星期天，1表示星期一，其它依次類推 |
組件的所有屬性值
props: {
value: {
type: [String, Date]
},
format: {
default: 'yyyy-MM-dd'
},
firstDayOfWeek: {
// sunday
default: 0
},
disabledDaysOfWeek: {
type: Array,
default () {
return []
}
},
width: {
type: String,
default: '200px'
},
clearButton: {
type: Boolean,
default: false
},
inputClasses: {
type: String,
default: ''
},
lang: {
type: String,
default: navigator.language
},
placeholder: {
type: String
},
hasInput: {
type: Boolean,
default: true
},
pane: {
type: Number,
default: 1
},
borderWidth: {
type: Number,
default: 2
},
onDayClick: {
type: Function,
default () {}
},
changePane: {
type: Function,
default () {}
},
specialDays: {
type: Object,
default () {
return {}
}
},
rangeBus: {
type: Function,
default () {
// return new Vue()
}
},
rangeStatus: {
type: Number,
default: 0
},
onDrawDate: {
type: Function,
default () {}
},
maxDate: {
type: String
},
minDate: {
type: String
},
showDateOnly: {
type: Boolean,
default: false
},
transfer: {
type: Boolean,
default: false
},
elementId: [String]
}五，源碼
以下是我改過(guò)后的源碼：
https://github.com/alaxgit/Vue2-Calendar
六，直接引用JS
如果你喜歡直接引用JS和CSS，不喜歡用webpack編譯啥的，可以直接下載編譯好的文件：
https://github.com/alaxgit/Vue2-Calendar/blob/master/lib/calendar.min.js
https://github.com/alaxgit/Vue2-Calendar/blob/master/lib/calendar.min.css
總結(jié)
以上所述是小編給大家介紹的基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
