博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
日期多选插件Kalendae.js
阅读量:5337 次
发布时间:2019-06-15

本文共 1893 字,大约阅读时间需要 6 分钟。

Kalendae.js一句话介绍

<<Kalendae.js是一款强大的日期多控件(插件),支持日期的单选、日期的多选、日期的范围选择案例

Kalendae.js如何使用

下载

1466232-20190820110226580-2107280890.png

在页面使用:新建一个demo.html

①直接使用:

完整代码:

    
KalendaeDemo

1直接展示(单选)

1.1直接展示(多选)

②输入框使用

完整代码:

    
KalendaeDemo

2输入框使用(单选):

2输入框使用(多选):

demo.html完整代码:

    
KalendaeDemo

1直接展示(单选)

1.1直接展示(多选)

2输入框使用(单选):

2输入框使用(多选):

显示效果:

1466232-20190820110551605-357035736.png

1466232-20190820110603789-772223936.png

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年',

最终效果:

1466232-20190820110753495-1598992172.png

指定的div使用Kalendae

前面都是通过指定class来使用kalendae,可以通过JavaScript代码指定容器使用kalendae。

修改Kalendae.prototype的titleFormat

完整代码:

    
KalendaeDemo

3指定div使用(多选):

转载

转载于:https://www.cnblogs.com/sunBinary/p/11381795.html

你可能感兴趣的文章
linux下的静态库与动态库详解
查看>>
hbuilder调底层运用,多张图片上传
查看>>
较快的maven的settings.xml文件
查看>>
Git之初体验 持续更新
查看>>
随手练——HDU 5015 矩阵快速幂
查看>>
Maven之setting.xml配置文件详解
查看>>
SDK目录结构
查看>>
malloc() & free()
查看>>
HDU 2063 过山车
查看>>
高精度1--加法
查看>>
String比较
查看>>
Django之Models
查看>>
CSS 透明度级别 及 背景透明
查看>>
Linux 的 date 日期的使用
查看>>
PHP zip压缩文件及解压
查看>>
SOAP web service用AFNetWorking实现请求
查看>>
Java变量类型,实例变量 与局部变量 静态变量
查看>>
mysql操作命令梳理(4)-中文乱码问题
查看>>
Python环境搭建(安装、验证与卸载)
查看>>
一个.NET通用JSON解析/构建类的实现(c#)
查看>>