溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一，前言
我是剛學Vue的菜鳥，在使用過程中需要用到日歷控件，由于項目中原來是用jQuery寫的，因此用了bootstarp的日歷控件，但是配合Vue實在有點蛋疼，不夠優雅……
于是網上搜了好久找到了Vue2-Calendar，不用說，挺好用的，但是同時也發現這個組件有些問題，有些功能挺不符合我們的要求，于是著手改了一版
二，改進的功能
在Vue2-Calendar v2.2.4 版基礎上作了優化。
1.改進原控件無法切換語言的BUG，支持 lang='zh-CN'和'en'。
2.日歷面板增加一個位置選項，允許讓面板右對齊，只需要position=right即可。
3.原 :on-day-click 事件只有在 hasInput=false 時才生效，現改為一直有效，這樣當用戶點擊日歷面板上的日期后就可以觸發該事件。
4.clear=false時文本框右側會顯示一個日歷圖標，高仿bootstrap的日歷組件，但clear=true時不顯示
效果圖
三，使用示例
1.常規使用，單日歷
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, //是否在文本框右側顯示清除按鈕（X）
placeholder: "日期", //水印
position: "left", //日期面板位置，默認null和left 居左，right則靠右
lang: "" //語言，默認中文，可選值：zh-CN、en
};
},
methods: {
//鼠標點擊日歷面板上的日期時的事件，
//傳遞的兩個參數均是同一個值，只是類型不同，隨便用哪個看個人需要
//date 是 Date 類型
//dateStr 是 String 類型
dayClick: function(date, dateStr) {
console.log(date);
console.log(dateStr);
console.log(this.value);
}
},
components: {
calendar: Calendar
}
});
2.常規使用，雙月日歷
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, //是否在文本框右側顯示清除按鈕（X）
placeholder: "日期", //水印
position: "left", //日期面板位置，默認null和left 居左，right則靠右
lang: "" //語言，默認中文，可選值：zh-CN、en
};
},
methods: {
//鼠標點擊日歷面板上的日期時的事件，
//傳遞的兩個參數均是同一個值，只是類型不同，隨便用哪個看個人需要
//date 是 Date 類型
//dateStr 是 String 類型
dayClick: function(date, dateStr) {
console.log(date);
console.log(dateStr);
console.log(this.value);
}
},
components: {
calendar: Calendar
}
});
3.雙日歷聯動，通常用在開始和結束時間的選擇上，結束時間不能早于開始時間
說明：當選擇了開始時間后，結束時間選擇時會顯示哪些日期可選，并且顯示已經選擇的開始時間
HTML代碼：
<calendar v-model="value" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="'起始時間'" :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="'結束時間'" :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
}
});
四，參數說明（翻譯的官方文檔）
安裝（需要node支持）
$ npm install vue2-slot-calendar
導入模塊
// 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>
多語言支持
系統提供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表示星期一，其它依次類推 |
組件的所有屬性值
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]
}
五，源碼
以下是我改過后的源碼：
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
總結
以上所述是小編給大家介紹的基于Vue2-Calendar改進的日歷組件（含中文使用說明），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
