基于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>

好吧,笔者仔细读了一下官方文档(全英文的,都不认得),这货好像只能实现日期的多选,连月份的多选都不能实现,更别说是年份的多选了。看来笔者还得再找找或者自己做做看了(修手机的,淘了个废品)。

原文地址:http://blog.51cto.com/13479739/2163120

时间: 2024-11-07 22:33:40

基于Kalendaer的日期多选的相关文章

easyui基于 layui.laydate日期扩展组件

本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和My97DatePicker结合的例子,但感觉也用的不是很爽. 发现国内的layDate体验非常满意,所以萌生出想把这两个组件组合起来的想法,具体代码如下,本人非前端,所以只是实现了基本功能,大神勿喷哦. easyUI版本:V1.5.2 layDate版本:V5.0 /* 基于laydate日期扩展组

基于CSS3自定义美化复选框Checkbox组合

今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化checkbox组合.另外,之前分享过的jQuery实现美化版的单选框和复选框也是非常不错. 在线预览   源码下载 实现的代码: <div class="container"> <div class="holder"> <div class=&qu

Android基于wheelView的自定义日期选择器(可拓展样式)

基于wheelView的自定义日期选择器 项目要求效果图: 要求 "6月20 星期五" 这一项作为一个整体可以滑动,"7时"."48分"分别作为一个滑动整体. 系统自带的DatePicker.TimePicker大家都知道,只有这种效果: 百度了很多,试了NumberPicker等都不行,本来打算自己写.网友推荐了一个开源组件WheelView,下下来试了试,发现他已经定义的很完善了,在他的基础上拓展很容易. 现将基于wheelView自定义日期

JS多选日期

项目需要一个可以选择多个日期的日期选择框,从网上找到一个单选的选择框源码 (http://blog.5d.cn/user2/samuel/200503/61881.html),修改成可以多选. 使用方法: 调用方法很简单: <input type="text" name="dateBegin" onclick="calendarShow(this)" readonly> 或者用button调用也行 <input type=&qu

bootstrap datetimepicker 复选可删除,可规定指定日期不可选

可实现类似于酒店预订的功能.支持日期多选,日期重复选择取消等功能. datetimepicker去网上下载 很多, 只需要取到 bootstrap-datetimepicker.min.js bootstrap-datetimepicker.min.css 两个文件即可 JS: <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <link href="

基于电离层的短波通信选频的文献总结(2018.8)

目录 基于电离层的短波通信选频的文献总结(2018.8) 电离层 $ ^{[1]}$ 短波在电离层的传播\(^{[1]}\) 短波通信传输模式和特性\(^{[2]}\) 传输模式 传输特性 基于电离层资料(模型)的自适应短波通信选频\(^{[3,4,5,6]}\) 参考文献 基于电离层的短波通信选频的文献总结(2018.8) -------范玉荣 电离层 $ ^{[1]}$ 地球受到来自宇宙天体(主要为太阳)的射线影响,使得大气层中的氮分子.氧分子.氮原子氧原子电离,产生正离子和电子,从而在\(

基于并行化的神经网络和复旦中文语料库,构建中文概率语言模型

本文旨在基于复旦中文语料库和神经网络模型构建中文的概率语言模型. 统计语言模型的一个目标是找到句子中不同词汇的联合分布,也就是找到一个单词序列出现的概率,一个训练好的统计语言模型可以被应用于语音识别.中文输入法.机器翻译等领域.在神经网络方法被提出之前,一个非常成功的构建语言模型的方法是 n-gram,n-gram 模型学习出统计出给出特定的单词序列时某个单词出现的条件概率,并且通过把一系列重叠的短语拼接起来,获得了模型的泛化能力.然而 n-gram 模型也有很多不如人意的地方.第一, n 的数

jQuery cxCalendar 日期选择器

cxCalendar 是基于 jQuery 的日期选择器插件. 它灵活自由,你可以自定义外观,日期的范围,返回的格式等. 版本: jQuery v1.7+ jQuery cxCalendar v1.5 github 使用方法 载入 CSS 文件 <link rel="stylesheet" href="jquery.cxcalendar.css"> 复制 载入 JavaScript 文件 <script src="jquery.js&qu

基于Docker快速搭建多节点Hadoop集群--已验证

Docker最核心的特性之一,就是能够将任何应用包括Hadoop打包到Docker镜像中.这篇教程介绍了利用Docker在单机上快速搭建多节点 Hadoop集群的详细步骤.作者在发现目前的Hadoop on Docker项目所存在的问题之后,开发了接近最小化的Hadoop镜像,并且支持快速搭建任意节点数的Hadoop集群. 一. 项目简介 GitHub: kiwanlau/hadoop-cluster-docker 直接用机器搭建Hadoop集群是一个相当痛苦的过程,尤其对初学者来说.他们还没开