基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）
一，前言
我是剛學(xué)Vue的菜鳥(niǎo)，在使用過(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代碼：
<calendar v-model="value" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" :lang="lang" :position="position" :on-day-click="dayClick"> 2 </calendar>
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代碼：
<calendar v-model="value" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" :lang="lang" :position="position" :on-day-click="dayClick" :pane="2"> 2 </calendar>
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)，通常用在開(kāi)始和結(jié)束時(shí)間的選擇上，結(jié)束時(shí)間不能早于開(kāi)始時(shí)間
說(shuō)明：當(dāng)選擇了開(kāi)始時(shí)間后，結(jié)束時(shí)間選擇時(shí)會(huì)顯示哪些日期可選，并且顯示已經(jīng)選擇的開(kāi)始時(shí)間
HTML代碼：
<calendar v-model="value" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="'起始時(shí)間'" :lang="lang" :position="position" :on-day-click="dayClick" :pane="1" :range-bus="getBus" :range-status="1"></calendar> 2 <calendar v-model="value2" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="'結(jié)束時(shí)間'" :lang="lang" :position="position" :on-day-click="dayClick" :pane="1" :range-bus="getBus" :range-status="2"></calendar>
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文件（推薦）
<link rel="stylesheet" href="/lib/calendar.min.css" rel="external nofollow" > <script src="/lib/calendar.min.js"></script>
多語(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)行開(kāi)發(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)隔開(kāi) | |
| 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ù)大家的！
相關(guān)文章
這篇文章主要介紹了Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
使用el-table做成樹(shù)形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問(wèn)題
這篇文章主要介紹了使用el-table做成樹(shù)形結(jié)構(gòu)并解決數(shù)據(jù)驅(qū)動(dòng)視圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽
這篇文章主要為大家介紹了使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
這篇文章主要介紹了vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3手動(dòng)封裝彈出框組件message的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,需要的小伙伴可以參考下2023-12-12
這篇文章主要為大家介紹了vue+G6圖形化實(shí)現(xiàn)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法
這篇文章主要介紹了Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08