溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）

發(fā)布時(shí)間：2020-10-11 20:54:28 來(lái)源：腳本之家 閱讀：377 作者：越笨越愛 欄目：web開發(fā)

一，前言

我是剛學(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è)組件有些問題，有些功能挺不符合我們的要求，于是著手改了一版

二，改進(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í)不顯示

效果圖

基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）

三，使用示例

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

基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）

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ī)使用，雙月日歷

基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）

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)，通常用在開始和結(jié)束時(shí)間的選擇上，結(jié)束時(shí)間不能早于開始時(shí)間

基于Vue2-Calendar改進(jìn)的日歷組件（含中文使用說(shuō)明）

說(shuō)明：當(dāng)選擇了開始時(shí)間后，結(jié)束時(shí)間選擇時(shí)會(huì)顯示哪些日期可選，并且顯示已經(jīng)選擇的開始時(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)行開發(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í)還沒研究這個(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ì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手