日期多选插件Kalendae.js
在项目中要实现日期多选的功能,于是在网上找到Kalendae.js,此文主要记录本人对于Kalendae.js的一些用法,以便以后查阅,希望对读者也有所帮助
主要内容如下:
- 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的titleFormat
titleFormat:'MMMM, YYYY年',
最终效果:
指定的div使用Kalendae
前面都是通过指定class来使用kalendae,可以通过JavaScript代码指定容器使用kalendae。
<div id="datepk"></div>
<script type="text/javascript">/*使用方式:new Kalendae(指定容器,配置);配置属性注解:months属性表示日历显示几个月,值:1、2、3.....;默认值:1mode属性表示显示的是单选还是多选还是范围,值:'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代码下载
转载于:https://www.cnblogs.com/ss0xt/p/6667179.html
日期多选插件Kalendae.js相关推荐
- vue 日历日期多选插件(v-calendar)中英文
默认多个日期高亮,下图为 示例 第一步:安装 v-calendar npm install --save v-calendar 第二步:在main.js中引入 v-calendar插件 import ...
- 强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示 本地下载 今天分享一个独立的日期选择插件Kalendae,Kalendae是 一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...
- My97日期插件实现日期多选
-##一.story 项目中一个查询页面的日期输入框需要实现多选,日期插件用的是My97,由于原始的My97不支持日期多选,只能选用其他日期插件或对My97进行改造,下面介绍下用js修改My97的属性 ...
- 记一次easyui使用calendar日期插件实现日期多选
easyui使用calendar日期插件实现日期多选 写在前面 需求 知己知彼 百战百胜 写完收工 写在前面 java开发,17年大专毕业.好不容易找个工作做了一年半左右结果行业不景气,我还没凉公司先 ...
- 日期插件rolldate.js的使用
日期插件rolldate.js的使用 下载地址:http://www.jq22.com/jquery-info19834 效果: 代码: <!DOCTYPE html> <html ...
- php日期控件calendar.js,轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用:xvDate( ...
- 日期时间选择插件 - laydate.js
日期时间选择插件 laydate.js 1. 引入JS. 官网:http://laydate.layui.com <script type="text/javascript" ...
- laydate实现日期多选
记录:layui laydate实现日期多选 HTml代码: <link rel="stylesheet" href="__PUBLIC__/layui-v2.5. ...
- 轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示 本地下载 功能强大的表单验证插件很多,以前我们介绍过validati ...
最新文章
- c# excel导出png_C#与Halcon联合编程步骤
- Element UI——布局容器el-container子元素强制上下排列
- Spring中的Advice类型及其应用
- Android 布局之GridLayout
- 音视频技术开发周刊 | 225
- leetcode 504. 七进制数(Java版)
- 如何使用man命令linux,Linux man命令的使用方法
- Codeforces Round #413 C-Fountains 树状数组
- linux 配置trac界面显示为中文,安装back|track 5 r3并配置中文界面简单教程
- 测一测!中科视拓免费开放口罩人脸检测与识别技术
- selenium java项目_1)selenium+ java集成,待深度项目流程应用
- 汉字转Base64的原理
- 实时数仓-数据采集层_1
- Java Map排序
- 愚人节,你的微信公众号图文排版够愚吗?
- java 计算农历_java计算农历日期
- 微信小程序使用Echarts 实现世界地图(其它地图同理)
- python numpy读取数据_numpy中以文本的方式存储以及读取数据方法
- 建立牢固的多功能Smartphone应用程序
- JavaScript百炼成仙 1.20 函数七重关之二 (作用域)