摘要：改進(jìn)原控件無(wú)法切換語(yǔ)言的，支持和。日歷面板增加一個(gè)位置選項(xiàng)，允許讓面板右對(duì)齊，只需要即可。原事件只有在時(shí)才生效，現(xiàn)改為一直有效，這樣當(dāng)用戶(hù)點(diǎn)擊日歷面板上的日期后就可以觸發(fā)該事件。

一，前言

我是剛學(xué)Vue的菜鳥(niǎo)，在使用過(guò)程中需要用到日歷控件，由于項(xiàng)目中原來(lái)是用jQuery寫(xiě)的，因此用了bootstarp的日歷控件，但是配合Vue實(shí)在有點(diǎn)蛋疼，不夠優(yōu)雅……

于是網(wǎng)上搜了好久找到了Vue2-Calendar，不用說(shuō)，挺好用的，但是同時(shí)也發(fā)現(xiàn)這個(gè)組件有些問(wèn)題，有些功能挺不符合我們的要求，于是著手改了一版

二，改進(jìn)的功能

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)用戶(hù)點(diǎn)擊日歷面板上的日期后就可以觸發(fā)該事件。
4. clear=false時(shí)文本框右側(cè)會(huì)顯示一個(gè)日歷圖標(biāo)，高仿bootstrap的日歷組件，但clear=true時(shí)不顯示

效果圖

三，使用示例

1.常規(guī)使用，單日歷

HTML代碼：

1  <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代碼：

 1 var app = new Vue({
 2             el: "#app",
 3             data: function() {
 4                 return {
 5                     disabled: [], //禁用的日期
 6                     value: new Date(), //值
 7                     format: "yyyy-MM-dd", //文本框中顯示的日期格式
 8                     clear: false, //是否在文本框右側(cè)顯示清除按鈕（X）
 9                     placeholder: "日期", //水印
10                     position: "left", //日期面板位置，默認(rèn)null和left 居左，right則靠右
11                     lang: "" //語(yǔ)言，默認(rèn)中文，可選值：zh-CN、en
12                 };
13             },
14             methods: {
15                 //鼠標(biāo)點(diǎn)擊日歷面板上的日期時(shí)的事件，
16                 //傳遞的兩個(gè)參數(shù)均是同一個(gè)值，只是類(lèi)型不同，隨便用哪個(gè)看個(gè)人需要
17                 //date 是 Date 類(lèi)型
18                 //dateStr 是 String 類(lèi)型
19                 dayClick: function(date, dateStr) {
20                     console.log(date);
21                     console.log(dateStr);
22                     console.log(this.value);
23                 }
24             },
25             components: {
26                 calendar: Calendar
27             }
28         });

2.常規(guī)使用，雙月日歷

HTML代碼：

1  <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代碼：

 1   var app = new Vue({
 2             el: "#app",
 3             data: function() {
 4                 return {
 5                     disabled: [], //禁用的日期
 6                     value: new Date(), //值
 7                     format: "yyyy-MM-dd", //文本框中顯示的日期格式
 8                     clear: false, //是否在文本框右側(cè)顯示清除按鈕（X）
 9                     placeholder: "日期", //水印
10                     position: "left", //日期面板位置，默認(rèn)null和left 居左，right則靠右
11                     lang: "" //語(yǔ)言，默認(rèn)中文，可選值：zh-CN、en
12                 };
13             },
14             methods: {
15                 //鼠標(biāo)點(diǎn)擊日歷面板上的日期時(shí)的事件，
16                 //傳遞的兩個(gè)參數(shù)均是同一個(gè)值，只是類(lèi)型不同，隨便用哪個(gè)看個(gè)人需要
17                 //date 是 Date 類(lèi)型
18                 //dateStr 是 String 類(lèi)型
19                 dayClick: function(date, dateStr) {
20                     console.log(date);
21                     console.log(dateStr);
22                     console.log(this.value);
23                 }
24             },
25             components: {
26                 calendar: Calendar
27             }
28         });

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代碼：

1  <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代碼：

 1  var app2 = new Vue({
 2             el: "#app2",
 3             data: function() {
 4                 return {
 5                     disabled: [],
 6                     value: new Date(),
 7                     value2: new Date(),
 8                     format: "yyyy-MM-dd",
 9                     clear: false,
10                     placeholder: "Start Date",
11                     position: "left",
12                     lang: "",
13                     bus: new Vue()
14                 };
15             },
16             methods: {
17                 dayClick: function(date, dateStr) {
18                     console.log(value= + this.value);
19                     console.log(value2= + this.value2);
20                 },
21                 getBus: function() {
22                     return this.bus;
23                 }
24             },
25             components: {
26                 calendar: Calendar
27             }
28         });

 四，參數(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)讓用戶(hù)自定義語(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)建步驟

# 安裝依賴(lài)
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ù)和事件

組件的所有屬性值

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