基于Kalendaer的日期多选
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Kalendaer的日期多选相关的知识，希望对你有一定的参考价值。
笔者，最近遇到一个需求，年份的多选事件。笔者之前见到的大多是月份多选，日子多选，时间多选，但是年份多选还是头回遇到。但是呢，有需求就说明有他存在的可然性。对于强大的代码来说，你觉得他能实现的那么他就一定能实现，还有你觉得他不一定的实现的，他有可能可以实现。
My97DatePicker插件，不能多选；
Kalendae插件，不兼容IE，且也没有关于能支持年份多选的介绍啊。
虽然，没有介绍年份的选择，但是呢，笔者想调试一下使其兼容IE，然后像碰运气一样（修手机的，淘了一台低价进水的手机，修修看）看看能否实现多年份选择。
一、引入Kalendae插件
<script type="text/javascript" src="build/kalendae.standalone.js" ></script>
<link rel="stylesheet" href="build/kalendae.css" />二、修改使其兼容IE8，就够了。
将kalendae.standalone.js中的这段注释
this._events.inputFocus = util.addEvent($input, ‘focus‘, function () {
changing = true; // prevent setSelected from altering the input contents.
self.setSelected(this.value);
changing = false;
self.show();
});
this._events.inputBlur = util.addEvent($input, ‘blur‘, function () {
if (noclose && util.isIE8()) {
noclose = false;
$input.focus();
}
else self.hide();
});在其后插入这段：
var DEFAULT_VERSION = 8;
var isIE8 = false;
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie")>-1;
var safariVersion;
if(isIE){
safariVersion = ua.match(/msie ([d.]+)/)[1];
if(parseInt(safariVersion) <= DEFAULT_VERSION ){
isIE8 = true;
}
}
this._events.inputFocus = util.addEvent($input, ‘focus‘, function () {
changing = true; // prevent setSelected from altering the input contents.
if(!isIE8){
self.setSelected(this.value);
}
isIE8 = false;
changing = false;
self.show();
});
this._events.inputBlur = util.addEvent($input, ‘blur‘, function () {
if (noclose && util.isIE8()) {
noclose = false;
isIE8 = true;
$input.focus();
}
else self.hide();
});三、接下来，我们探索其能否进行，多年份的选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>年份多选器</title>
<script type="text/javascript" src="build/kalendae.standalone.js" ></script>
<link rel="stylesheet" href="build/kalendae.css" />
</head>
<body>
<controls:Calendar DisplayMode="Month"></controls:Calendar>
<input class="auto-kal" data-kal="mode:‘multiple‘"></input>
<!--
mode：”single”|”multiple”|”range”。控件选择模式：单个日期选择，多个日期选择，选择日期范围。
months：显示月份数。
direction：”past”|”today-past”|”any”|”today-future”|”future”。可选日期范围：今日以前，今日及今日以前，无限制，今日及今日以后，今日以后。
-->
</body>
</html>
好吧，笔者仔细读了一下官方文档（全英文的，都不认得），这货好像只能实现日期的多选，连月份的多选都不能实现，更别说是年份的多选了。看来笔者还得再找找或者自己做做看了（修手机的，淘了个废品）。
以上是关于基于Kalendaer的日期多选的主要内容，如果未能解决你的问题，请参考以下文章
view UI 里面日期选择器多选 multiple 不生效