基于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>
好吧,笔者仔细读了一下官方文档(全英文的,都不认得),这货好像只能实现日期的多选,连月份的多选都不能实现,更别说是年份的多选了。看来笔者还得再找找或者自己做做看了(修手机的,淘了个废品)。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。