日期多选插件Kalendae.js 动态引用
2017-11-11 18:05
435 查看
最近用到日期多选,用了Kalendae插件。说说使用心得。
1、
插件下载地址:
Github下载下载地址
2、使用
![](https://img-blog.csdn.net/20171111181234489?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzQxMDI2Nzc1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
① 解压后将build目录下的js和css拷贝到项目相应的资源文件夹下面,在需要使用日期多选的页面引入js和css就行了:
②直接使用可以用div承载,也可以用input承载
div使用:
加上‘auto-kal’类和data-kal 属性就可自动加载日期插件。
input使用:
加上‘auto-kal’类和data-kal 属性,点击输入框就可加载日期插件,同时把选择的日期用逗号隔开显示在input框中。
效果图:
![](https://img-blog.csdn.net/20171111182222469?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzQxMDI2Nzc1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3、美化
网上有很多美化教程。链接
4、重点,动态加载出来的input、或者div 怎么使用插件。
![](https://img-blog.csdn.net/20171111183909792?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzQxMDI2Nzc1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
原理:kalendae.standalone.js 中,找到 “.auto-kal”类所在地方,是通过 new Kalendae.Input(e, options) 使input 可加载日期组件。
1、
插件下载地址:
Github下载下载地址
2、使用
① 解压后将build目录下的js和css拷贝到项目相应的资源文件夹下面,在需要使用日期多选的页面引入js和css就行了:
<!-- 时间多选插件 --> <link rel="stylesheet" href="__PUBLIC__/kalendae/kalendae.css" type="text/css"> <script type='text/javascript' src='__PUBLIC__/kalendae/kalendae.standalone.js'></script>
②直接使用可以用div承载,也可以用input承载
div使用:
加上‘auto-kal’类和data-kal 属性就可自动加载日期插件。
<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>div(单选)</p> <div class="auto-kal"></div> <p>div(多选)</p> <div class="auto-kal" data-kal="mode:'multiple'"></div> </body> </html>
input使用:
加上‘auto-kal’类和data-kal 属性,点击输入框就可加载日期插件,同时把选择的日期用逗号隔开显示在input框中。
<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>输入框(单选):</p> <input type="text" class="auto-kal"> <p>输入框(多选):</p> <input type="text" class="auto-kal" data-kal="mode:'multiple'" style="width: 100%;"> </body> </html>
效果图:
3、美化
网上有很多美化教程。链接
4、重点,动态加载出来的input、或者div 怎么使用插件。
var html = ''; for(var i = 0; i< ret.length; i++){ html += '<div class="conbination col-sm-12 line-bottom conbinationNoTime">' html += '<div class="col-sm-10 spacing-padding" data-spec="0_0/1_0">' html += '<label class="col-sm-2 control-label no-padding-right text-left" data-spec="0_0/1_0" >'+ret[i]+'</label>' html += '<div class="col-sm-10" style="padding-top:5px;">' html += '<input type="text" id="timerange_'+i+'" class="timerange auto-kal" value="" placeholder="点击选择日期范围" data-kal="mode:\'multiple\'" style="width: 70%;"/>' html += '<a href="javascript:void(0);" class="spacing-padding ensureTime" data-spec="0_0/1_0">' html += '<button type="button" class="btn btn-xs all-btn btn-purple ajax-display-all2" >' html += '<span class="ace-icon fa fa-globe icon-on-right bigger-110"></span>确定</button>' html += '</a>' html += '</div>' html += '</div>' html += '</div>'; } $("#option_price").html(html); $(".timerange").each(function(e){ var option = $(this).data("kal"); optionArr = option.split(':'); options = {} options[optionArr[0]] = optionArr[1].replace(/\'/g, "");; new Kalendae.Input(this, options);//参数1:当前input对象,参数2:当前对象的mode(对象类型) })
原理:kalendae.standalone.js 中,找到 “.auto-kal”类所在地方,是通过 new Kalendae.Input(e, options) 使input 可加载日期组件。
相关文章推荐
- [置顶] 日期多选插件Kalendae.js
- 日期多选插件Kalendae.js
- js 日历控件日期多选 kalendae.js
- 【vue学习】vue中怎么引用laydate.js日期插件
- Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
- js日期插件
- Layer.date 时间插件 JS日期时间插件
- 日期插件WdatePicker.js的使用方法
- JQuery插件:动态列和无间隙网格布局Mason.js
- JS动态引用的问题
- 前端日期选取插件bootstrap-datepicker.js的使用
- 日期插件 pikaday.js 自己使用的小心得 希望能帮到你们
- asp.net后台代码动态引用添加JS和css文件
- 【js】日期插件 my97日期控件
- js中引用类型之日期
- 动态加载css、js引用
- web优化之-js动态合并 动态压缩 去掉js重复引用 js缓存 js延迟加载
- js日期插件