您的位置：首页 > Web前端 > JavaScript

日期多选插件Kalendae.js 动态引用

2017-11-11 18:05 435 查看

最近用到日期多选，用了Kalendae插件。说说使用心得。

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 动态加载日期多选插件日期选择器

相关文章推荐

新的分享

章节导航