基于Vue2-Calendar改进的日历组件（含中文使用说明）

一，前言

我是刚学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代码：

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>

View Code

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, //是否在文本框右侧显示清除按钮（X）
 9                     placeholder: "日期", //水印
10                     position: "left", //日期面板位置，默认null和left 居左，right则靠右
11                     lang: "" //语言，默认中文，可选值：zh-CN、en
12                 };
13             },