[置顶] 日期多选插件Kalendae.js
2016-10-09 16:07
337 查看
在项目中要实现日期多选的功能,于是在网上找到Kalendae.js,此文主要记录本人对于Kalendae.js的一些用法,以便以后查阅,希望对读者也有所帮助
主要内容如下:
Kalendaejs一句话介绍
Kalendaejs如何使用
下载
在页面使用新建一个demohtml
Kalendaejs的个性化配置
日期中文显示
修改月份显示效果
修改星期显示效果
修改年月显示效果
指定的div使用Kalendae
修改控件显示的大小
案例
完整代码:
②输入框使用
完整代码:
demo.html完整代码:
显示效果:
最终是这样子的:
最终代码:
最终效果:
完整代码:
修改kalendae.css
设置.kalendae .k-calendar的width为100%;
设置.kalendae .k-title,
.kalendae .k-header,
.kalendae .k-days 的width为100%;
.kalendae .k-header span 的width为12.8%;
.kalendae .k-days span 的width为12.8%;
.kalendae .k-header span 和.kalendae .k-days span的width要相等
设置文字显示的样式:
最终效果:
个性化配置的css和js demo代码下载
主要内容如下:
Kalendaejs一句话介绍
Kalendaejs如何使用
下载
在页面使用新建一个demohtml
Kalendaejs的个性化配置
日期中文显示
修改月份显示效果
修改星期显示效果
修改年月显示效果
指定的div使用Kalendae
修改控件显示的大小
Kalendae.js一句话介绍
Kalendae.js是一款强大的日期多控件(插件),支持日期的单选、日期的多选、日期的范围选择案例
Kalendae.js如何使用
下载
(Github下载|csdn下载)下载Kalendae.js相关的资源,解压后将build目录下的js和css拷贝到项目相应的资源文件夹下面,在需要使用日期多选的页面引入js和css就行了:<link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type='text/javascript' src='./build/kalendae.standalone.js'></script> <!-- 这里不引入min.js是因为在后面要修改js -->
在页面使用:新建一个demo.html
①直接使用:<!-- 单选 --> <div class="auto-kal"></div> <!-- 多选 --> <div class="auto-kal" data-kal="mode:'multiple'"></div>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type='text/javascript' src='./build/kalendae.standalone.js'></script> <title>KalendaeDemo</title> </head> <body> <p>1直接展示(单选)</p> <div class="auto-kal"></div> <p>1.1直接展示(多选)</p> <div class="auto-kal" data-kal="mode:'multiple'"></div> </body> </html>
②输入框使用
<!-- 单选 --> <input type="text" class="auto-kal"> <!-- 多选 --> <input type="text" class="auto-kal" data-kal="mode:'multiple'">
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type='text/javascript' src='./build/kalendae.standalone.js'></script> <title>KalendaeDemo</title> </head> <body> <p>2输入框使用(单选):</p> <input type="text" class="auto-kal"> <p>2输入框使用(多选):</p> <input type="text" class="auto-kal" data-kal="mode:'multiple'" style="width: 100%;"> </body> </html>
demo.html完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type='text/javascript' src='./build/kalendae.standalone.js'></script> <title>KalendaeDemo</title> </head> <body> <p>1直接展示(单选)</p> <div class="auto-kal"></div> <p>1.1直接展示(多选)</p> <div class="auto-kal" data-kal="mode:'multiple'"></div> <p>2输入框使用(单选):</p> <input type="text" class="auto-kal"> <p>2输入框使用(多选):</p> <input type="text" class="auto-kal" data-kal="mode:'multiple'" style="width: 100%;"> </body> </html>
显示效果:
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()]; },
修改年月显示效果:
修改Kalendae.prototype的titleFormattitleFormat:'MMMM, YYYY年',
最终效果:
指定的div使用Kalendae
前面都是通过指定class来使用kalendae,可以通过JavaScript代码指定容器使用kalendae。<div id="datepk"></div> <script type="text/javascript"> /*使用方式: new Kalendae(指定容器,配置); 配置属性注解: months属性表示日历显示几个月,值:1、2、3.....;默认值:1 mode属性表示显示的是单选还是多选还是范围,值:'single'、'multiple'、'range';默认值:'single' subscribe属性表示绑定kalendea指定的事件,支持的事件有change、date-clicked、view-changed */ new Kalendae(document.getElementById("datepk"), { months:1, mode:'multiple', subscribe: { 'date-clicked': function (date) { console.log(date._i, this.getSelected()); } } }); </script>
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./build/kalendae.css" type="text/css"> <script type='text/javascript' src='./build/kalendae.standalone.js'></script> <title>KalendaeDemo</title> </head> <body> <p>3指定div使用(多选):</p> <div id="datepk" style="width: 100%;"></div> </body> <script type="text/javascript"> new Kalendae(document.getElementById("datepk"), { months:1, mode:'multiple', subscribe: { 'date-clicked': function (date) { console.log(date._i, this.getSelected()); } } }); </script> </html>
修改控件显示的大小
(问题:当页面很小的时候布局会乱……)修改kalendae.css
设置.kalendae .k-calendar的width为100%;
.kalendae .k-calendar { display: inline-block; zoom:1; *display:inline; /* width改为100% width:155px;*/ width: 100%; vertical-align:top; }
设置.kalendae .k-title,
.kalendae .k-header,
.kalendae .k-days 的width为100%;
.kalendae .k-title, .kalendae .k-header, .kalendae .k-days { /* width改为100% */ /* width:154px; */ width: 100%; display:block; overflow:hidden; }
.kalendae .k-header span 的width为12.8%;
.kalendae .k-header span { text-align:center; font-weight:bold; /* 这里的width要和.kalendae .k-days span 里面的相等 */ width:12.8%; padding:1px 0; color:#666; }
.kalendae .k-days span 的width为12.8%;
.kalendae .k-days span { /* 水平居中 */ text-align:center; width:12.8%; /* 高度 4.5em效果比较好 height等于line-height就能垂直居中了 */ height:4.5em; line-height:4.5em; padding:2px 3px 2px 2px; border:1px solid transparent; border-radius:3px; color:#999; }
.kalendae .k-header span 和.kalendae .k-days span的width要相等
设置文字显示的样式:
.kalendae .k-days span { /* 水平居中 */ text-align:center; width:12.8%; /* 高度 4.5em效果比较好 height等于line-height就能垂直居中了 */ height:4.5em; line-height:4.5em; padding:2px 3px 2px 2px; border:1px solid transparent; border-radius:3px; color:#999; }
最终效果:
个性化配置的css和js demo代码下载
相关文章推荐
- 日期多选插件Kalendae.js
- 日期多选插件Kalendae.js 动态引用
- js 日历控件日期多选 kalendae.js
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
- WdatePicker.js 日期时间插件
- 【js】日期插件 my97日期控件
- [置顶] JQuery日期插件datepicker的使用
- 强大的独立日期选择器(date picker)插件 - Kalendae
- JS插件(1) 实现 指定格式日期
- [js开源组件开发]js多选日期控件
- 纯js可定制的跨浏览器日期时间选择器插件
- js jsp 时间 日期 控件 插件 简单 实用
- JQuery 插件 ui.datepicker.js 中文日期输入框
- 多选插件JS源码。
- date.plugin.js 日期插件
- bootstrap-datetimepicker.min.js日期插件使用记录
- 简单易用的JS日期插件
- 强大的独立日期选择器(date picker)插件 - Kalendae
- lhgcalendar的应用[一款js日期时间插件]
- 一款不错的JS日期插件 Mobiscroll