第一，前言

我是刚学Vue的菜鸟，在使用的过程中需要用到日历控件。由于项目最初是用jQuery编写的，所以我使用了bootstarp的日历控件，但是和Vue合作有点痛苦，不够优雅.

于是我在网上搜索了很久，找到了Vue2-Calendar。不用说，它使用起来相当容易，但同时我发现这个组件有一些问题，有些功能不符合我们的要求，所以我开始换一个版本

第二，改进的功能

基于Vue2-Calendar v2.2.4进行了优化

1.改进原控件不能切换语言的BUG，支持lang='zh-CN '和' en '。

2.向日历面板添加位置选项，允许面板向右对齐，刚好位置=右侧。

3.最初的：on-day-click事件仅在hasInput=false时生效，但现在它始终有效，因此当用户单击日历面板上的日期时，可以触发该事件。

4.当4.clear=false时，将在文本框的右侧显示一个日历图标，这与引导日历组件非常相似，但是当clear=true时不会显示

翻译

第三，用例子

1.常规使用，单一日历

HTML代码：

日历v-model=' value ' show-date-only : disabled-days-week=' disabled ' : format=' format ' : clear-button=' clear ' : placehold Der=: lang=' lang ' : position=' position ' : on-day-click=' day click ' 2/Calendar JS代码：

Varapp=newvue ({el:' # app '，data : function(){ return { disabled :[]，//disabled Date value : new Date()，//valueformat:' yyyy-mm-DD '，//文本框中显示的日期格式为clear: false，//是否在文本框右侧显示clear按钮(X) placeholder:' date '，//水印位置3: ' left '//传递的两个参数都是相同的值，但是类型不同。你可以看看你想要哪一个。//日期是日期类型。//dateStr是String类型的dayclick3360函数(date，dateStr){ console . log(date)；console . log(DateStr)；console . log(this . value)；} }，组件： { Calendar : Calendar } })；2.定期使用，双月日历

HTML代码：

日历v-model=' value ' show-date-only : disabled-days-week=' disabled ' : format=' format ' : clear-button=' clear ' : placehold Der ' : lang=' lang ' : position=' position ' : on-day-click=' day click ' : panel=' 2 ' 2/Calendar JS代码：

Varapp=newvue ({el:' # app '，data : function(){ return { disabled :[]，//disabled Date value : new Date()，//valueformat:' yyyy-mm-DD '，//文本框中显示的日期格式为clear: false，//是否在文本框右侧显示clear按钮(X) placeholder:' date '，//水印位置3: ' left '//传递的两个参数都是相同的值，但是类型不同。你可以看看你想要哪一个。//日期是日期类型。//dateStr是String类型的dayclick3360函数(date，dateStr){ console . log(date)；console . log(DateStr)；console . log(this . value)；} }，组件： { Calendar : Calendar } })；3.双日历联动通常用于选择开始和结束时间，结束时间不能早于开始时间

说明：当选择了开始时间后，结束时间选择时会显示哪些日期可选，并且显示已经选择的开始时间

超文本标记语言代码：

日历v-model=' value ' show-date-only : disabled-days-week=' disabled ' : format=' format ' : clear-button=' clear ' : placeholder=' '起始时间： lang=' lang ' : position=' position ' : on-day-click=' day click ' : pane=' 1 ' : range-bus=' GetBus ' : range-status=' 1 '/calendar 2 calendar 2 calendar v-model=' value 2 ' show-date-only : disabled-days-week=' 禁用' :格式='格式' 3:清除按钮='结束时间： lang=' lang ' : position=' position ' : on-day-click=' day click ' : 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:函数(日期，日期字符串){控制台。log(' value=' this。值')；控制台。log('值2=' this。值2’)；}，getBus:函数(){ return this.bus} }，组件： {日历：日历} })；

四，参数说明（翻译的官方文档)

安装（需要结节支持)

$ npm安装vu E2-插槽-日历

导入模块

//js文件导入' vue 2-slot-calendar/lib/calendar。量滴CSS '；从“vue 2-槽-日历/lib/日历”导入日历；ES6模块中的某视频剪辑软件文件//从“vue 2-插槽-日历"导入日历；//在CommonJSconst中日历=必需(' vue 2-slot-Calendar ')；//在全局变量常量日历中；直接引用编译好的射流研究…文件（推荐)

链接rel='样式表href='/lib/calendar。量滴CSS ' rel='外部' nofollow '脚本src=' http :/lib/calendar。量滴js /脚本多语言支持

系统提供窗户VueCalendarLang .勾子函数来让用户自定义语言，

窗户VueCalendarLang=function(lang){ return }；//对象必须是下面数据格式};上面勾子函数返回的必须是下面格式的数据对象。

下面的脚本在/src/lang/zh-CN.js中有

{ daysOfWeek: ['日', '一', '二', '三', '四', '五', '六]，limit: '超过限制（最多{{limit}}项)'，loading: '加载中.最小长度： '最小长度，months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二],未选择： '未选择，要求： '必填项，search: '查找'} 构建步骤

# 安装依赖新公共管理安装#运行开发服务器localhost:4000npm运行开发#编译（压缩射流研究…和半铸钢钢性铸铁(铸造半钢)等)国家预防机制运行构建#单元测试新公共管理运行单元#运行所有测试新公共管理测试参数和事件

按名称输入输出的值类型默认描述值字符串''组件，即v-model的值，宽度字符串' 200px '，输入文本框的宽度，格式字符串yyyy-MM-dd日期格式，可用值：d，dd，M，MM，MMM，mmmm，yyy。每周禁用天数数组。可用值为0-6，多个值用逗号分隔。clear-button Bollean false是否显示clear按钮，当显示clear按钮时，右侧的日历图标将不显示。如果未显示清除按钮，将显示占位符字符串文本框中显示的水印。hasInput布尔值为真。是否在文本框中显示窗格编号1日历面板的数量，默认为1，双月日历可以设置为2。目前只支持1和2边框第2号日历面板边框线宽onDayClick函数，已更改为不受hasInput值限制，在special days Object special date change pane函数切换日历面板时始终触发事件。这个我还没研究过，大部分情况下都不需要。请参考/src/modules/docs.vue范围总线功能。暂时不知道是什么意思。请始终返回一个新的Vue()，它适合于范围状态号为0的日期范围状态。默认情况下，0表示不使用日期范围，1表示双日历联动的开始日期。2表示双日历联动的结束日期，是onDrawDate函数绘制日期时的事件。您可以让用户自定义日历样式showDateOnly Boolean false是否仅显示日历面板transfer Boolean false是否将日历面板添加到文档. body elementId String日历ID firstDayOfWeek Number 0表示一周的第一天，0表示星期日，1表示星期一，依此类推。

prop : { value : { type :[String，Date] }，format : { default : ' yyyy-MM-DD ' }，first day fweek 3360 {//Sunday default : } 0，disabledaysofweek 3360 { type 3: Array，default () { return [] }，width: { type: String，default: ' 200px borderwidth : { type : Number，default: 2 }，on dayclick : { type : Function，default () {}，change pane : { type : Function，default () {}，specialDays: { type: Object，default(){ return } }，range bus : { type : Function，default () { //return new Vue() }，range

以下是我修改后的源代码：

https://github.com/alaxgit/Vue2-Calendar

第六，直接引用JS

如果喜欢直接引用JS和CSS，不喜欢用webpack编译，可以直接下载编译好的文件：

https://github.com/alax git/vue 2-Calendar/blob/master/lib/Calendar . min . js

https://github.com/alax git/vue 2-Calendar/blob/master/lib/Calendar . min . CSS

摘要

以上是基于边肖推出的Vue2-Calendar改进的日历组件(含中文说明)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！