calendar是什么意思

基于Vue2-Calendar改进的⽇历组件（含中⽂使⽤说明）

⼀，前⾔

我是刚学Vue的菜鸟，在使⽤过程中需要⽤到⽇历控件，由于项⽬中原来是⽤jQuery写的，因此⽤了bootstarp的⽇历控件，但是配合Vue实在有点蛋疼，不够优雅……

于是⽹上搜了好久找到了Vue2-Calendar，不⽤说，挺好⽤的，但是同时也发现这个组件有些问题，有些功能挺不符合我们的要求，于是着⼿改了⼀版

⼆，改进的功能

在Vue2-Calendarv2.2.4版基础上作了优化。

1.改进原控件⽆法切换语⾔的BUG，⽀持lang='zh-CN'和'en'。

2.⽇历⾯板增加⼀个位置选项，允许让⾯板右对齐，只需要position=right即可。

3.原:on-day-click事件只有在hasInput=fal时才⽣效，现改为⼀直有效，这样当⽤户点击⽇历⾯板上的⽇期后就可以触发该事件。

=fal时⽂本框右侧会显⽰⼀个⽇历图标，⾼仿bootstrap的⽇历组件，但clear=true时不显⽰

效果图

三，使⽤⽰例

1.常规使⽤，单⽇历

HTML代码：

2

JS代码：

varapp=newVue({

el:"#app",

data:function(){

return{

disabled:[],//禁⽤的⽇期

value:newDate(),//值

format:"yyyy-MM-dd",//⽂本框中显⽰的⽇期格式

clear:fal,//是否在⽂本框右侧显⽰清除按钮（X）

placeholder:"⽇期",//⽔印

position:"left",//⽇期⾯板位置，默认null和left居左，right则靠右

lang:""//语⾔，默认中⽂，可选值：zh-CN、en

};

},

methods:{

//⿏标点击⽇历⾯板上的⽇期时的事件，

//传递的两个参数均是同⼀个值，只是类型不同，随便⽤哪个看个⼈需要

//date是Date类型

//dateStr是String类型

dayClick:function(date,dateStr){

(date);

(dateStr);

();

}

},

components:{

calendar:Calendar

}

});

2.常规使⽤，双⽉⽇历

HTML代码：

2

JS代码：

varapp=newVue({

el:"#app",

data:function(){

return{

disabled:[],//禁⽤的⽇期

value:newDate(),//值

format:"yyyy-MM-dd",//⽂本框中显⽰的⽇期格式

clear:fal,//是否在⽂本框右侧显⽰清除按钮（X）

placeholder:"⽇期",//⽔印

position:"left",//⽇期⾯板位置，默认null和left居左，right则靠右

lang:""//语⾔，默认中⽂，可选值：zh-CN、en

};

},

methods:{

//⿏标点击⽇历⾯板上的⽇期时的事件，

//传递的两个参数均是同⼀个值，只是类型不同，随便⽤哪个看个⼈需要

//date是Date类型

//dateStr是String类型

dayClick:function(date,dateStr){

(date);

(dateStr);

();

}

},

components:{

calendar:Calendar

}

});

3.双⽇历联动，通常⽤在开始和结束时间的选择上，结束时间不能早于开始时间

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

HTML代码：

2

JS代码：

varapp2=newVue({

el:"#app2",

data:function(){

return{

disabled:[],

value:newDate(),

value2:newDate(),

format:"yyyy-MM-dd",

clear:fal,

placeholder:"StartDate",

position:"left",

lang:"",

bus:newVue()

};

},

methods:{

dayClick:function(date,dateStr){

('value='+);

('value2='+2);

},

getBus:function(){

;

}

},

components:{

calendar:Calendar

}

});

四，参数说明（翻译的官⽅⽂档）

安装（需要node⽀持）

$npminstallvue2-slot-calendar

导⼊模块

//jsfile

import'vue2-slot-calendar/lib/';

importcalendarfrom'vue2-slot-calendar/lib/calendar';

//vuefile

//inES6modules

importCalendarfrom'vue2-slot-calendar';

//inCommonJS

constCalendar=require('vue2-slot-calendar');

//inGlobalvariable

constVueCalendar=Calendar;

直接引⽤编译好的js⽂件（推荐）

多语⾔⽀持

系统提供endarLang勾⼦函数来让⽤户⾃定义语⾔，

endarLang=function(lang){

return{};//对象必须是下⾯JSON格式

};

上⾯勾⼦函数返回的必须是下⾯格式的JSON对象。

下⾯的脚本在/src/lang/中有

{

daysOfWeek:["⽇","⼀","⼆","三","四","五","六"],

limit:"超过限制(最多{{limit}}项)",

loading:"加载中...",

minLength:"最⼩长度",

months:[

"⼀⽉",

"⼆⽉",

"三⽉",

"四⽉",

"五⽉",

"六⽉",

"七⽉",

"⼋⽉",

"九⽉",

"⼗⽉",

"⼗⼀",

"⼗⼆"

],

notSelected:"未选择",

required:"必填项",

arch:"查找"

}

构建步骤

#安装依赖

npminstall

#运⾏开发服务器localhost:4000

npmrundev

#编译（压缩JS和CSS等）

npmrunbuild

#单元测试

npmrununit

#运⾏所有测试

npmtest

参数和事件

NameTypeDefaultDescription

valueString''组件输⼊输出的值，即v-model的值

widthString'200px'input⽂本框的宽度

formatStringyyyy-MM-dd⽇期格式,可⽤值：d,dd,M,MM,MMM,MMMM,yyyy.

disabled-days-of-weekArray每周有哪些天禁⽤，可⽤值0-6，多个值则⽤逗号隔开

clear-buttonBolleanfal是否显⽰清除按钮，显⽰清除按钮时右侧的⽇历图标不显⽰，不显⽰清除按钮时则显⽰⽇历图标

placeholderString⽂本框中显⽰的⽔印

hasInputBooleantrue是否显⽰⽂本框

paneNumber1⽇历⾯板数量，默认1，双⽉⽇历设为2即可，⽬前仅⽀持1和2

borderWidthNumber2⽇历⾯板边框线宽度

onDayClickFunction点击⽇期时的事件，已改为不受hasInput值的限制，总是触发

specialDaysObject特殊⽇期

changePaneFunction切换⽇历⾯板时的事件,暂时还没研究这个，⼤多数情况下⽤不到，请参考/src/modules/

rangeBusFunction暂时不明⽩啥意思，请总是返回⼀个newVue()就对了

rangeStatusNumber0⽇期范围状态，默认0表⽰不使⽤⽇期范围，1表⽰双⽇历联动的起始⽇期，2表⽰双⽇历联动的结束⽇期

onDrawDateFunction绘制⽇期时的事件，可以让⽤户⾃定义⽇历样式

showDateOnlyBooleanfal是否只显⽰⽇历⾯板

transferBooleanfal是否将⽇历⾯板添加到中

elementIdString⽇历ID

firstDayOfWeekNumber0每周第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:fal

},

inputClass:{

type:String,

default:''

},

lang:{

type:String,

default:ge

},

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(){

//returnnewVue()

}

},

rangeStatus:{

type:Number,

default:0

},

onDrawDate:{

type:Function,

default(){}

},

maxDate:{

type:String

},

minDate:{

type:String

},

showDateOnly:{

type:Boolean,

default:fal

},

transfer:{

type:Boolean,

default:fal

},

elementId:[String]

}

五，源码

以下是我改过后的源码：

六，直接引⽤JS

如果你喜欢直接引⽤JS和CSS，不喜欢⽤webpack编译啥的，可以直接下载编译好的⽂件：

总结

以上所述是⼩编给⼤家介绍的基于Vue2-Calendar改进的⽇历组件（含中⽂使⽤说明），希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！