Kalendae.js一句话介绍
<<Kalendae.js是一款强大的日期多控件(插件),支持日期的单选、日期的多选、日期的范围选择案例
Kalendae.js如何使用
下载
在页面使用:新建一个demo.html
①直接使用:
完整代码:
KalendaeDemo 1直接展示(单选)
1.1直接展示(多选)
②输入框使用
完整代码:
KalendaeDemo 2输入框使用(单选):
2输入框使用(多选):
demo.html完整代码:
KalendaeDemo 1直接展示(单选)
1.1直接展示(多选)
2输入框使用(单选):
2输入框使用(多选):
显示效果:
Kalendae.js的个性化配置
日期中文显示
默认显示的样式是英文的,用户不友好,可以在kalendae.standalone.js里面进行编辑,设置Locale.prototype
修改月份显示效果:
/*修改_months属性和_monthsShort属性*/_months : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_')_monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_')
最终是这样子的:
/*_months : 'January_February_March_April_May_June_July_August_September_October_November_December'.split('_'),*/_months : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),months : function (m) { return this._months[m.month()];},/*_monthsShort : 'Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec'.split('_'),*/_monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),monthsShort : function (m) { return this._monthsShort[m.month()];},
修改“星期”显示效果:
修改_weekdays 、_weekdaysShort 和_weekdaysMin
最终代码:
//星期显示样式_weekdays : '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),weekdays : function (m) { return this._weekdays[m.day()];}, _weekdaysShort : '周日_周一_周二_周三_周四_周五_周六'.split('_'),weekdaysShort : function (m) { return this._weekdaysShort[m.day()];}, _weekdaysMin : '日_一_二_三_四_五_六'.split('_'),weekdaysMin : function (m) { return this._weekdaysMin[m.day()];},
修改年月显示效果:
titleFormat:'MMMM, YYYY年',
最终效果:
指定的div使用Kalendae
前面都是通过指定class来使用kalendae,可以通过JavaScript代码指定容器使用kalendae。
修改Kalendae.prototype的titleFormat
完整代码:
KalendaeDemo 3指定div使用(多选):
转载