2019-03-06 16:50:18

git官方教程:https://github.com/Twipped/Kalendae

js、css:https://pan.baidu.com/s/1Ye-d09OMG_31E8NLqzGwDA        提取码:4v58

项目中需要用到能够显示多个日期的组件,查了好久,找到了Kalendae,当然其他的日期组件因为不了解,不代表不能实现。

使用方式:(日历绑定div)

  1.html中引入js、css

  2.<div id="datepk"></div>

  3.js中初始化并设置参数:

    

var kal= new Kalendae(document.getElementById("datepk"), {
      months:1,
      mode:'multiple',
      subscribe: {
        'date-clicked': function (date) {
          //点击日期事件
        },
        'change': function(date){           //日期更改事件
        },
        'view-changed': function(date){           //界面更改事件
        }       }
    });

    

    注意,这里使用一个变量接收,可以在后期通过这个变量对日历进行动态操作,例如获取所有选中的日期:kal.getSelected();

 遇到的bug:

    项目中需要动态显示跨好几个月的日期,当把这些日期动态的设置给日历时,出现了一种现象:

     

    不是当前月份的日期也被选中了,苦恼了很久也没有从Kalendae根本上找到解决方式,最后我在view-changed添加了事件,每次变化都只查询当前年月的日期然后显示。

    

Kalendae使用总结的更多相关文章

  1. 基于JS功能强大的日期插件Kalendae

    开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...

  2. 一款灵活好用的日历控件Kalendae

    Kalendae是一款纯js不依赖任何js库的日历控件,可以轻松实现显示月份数量,当前选中多个日期,并可以按照周等你想要的格式去定制选中项. 下载地址:GitHub/Kalendae 第一步:Kale ...

  3. 日期插件kalendae,遇到的一些问题

    1.日期中文显示 /*_months : 'January_February_March_April_May_June_July_August_September_October_November_D ...

  4. 日期多选插件Kalendae.js

    在项目中要实现日期多选的功能,于是在网上找到Kalendae.js,此文主要记录本人对于Kalendae.js的一些用法,以便以后查阅,希望对读者也有所帮助 主要内容如下: Kalendaejs一句话 ...

  5. JavaScript日期选择控件Kalendae

    在线演示 本地下载

  6. 9款精致HTML5/jQuery日历时钟控件源码下载(源码请见百度云) 链接:http://pan.baidu.com/s/1geIXe75 密码:7m4a

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  7. WEB 前端开发插件整理

    下拉框插件 1.select http://select2.github.io/ 2.双 select http://loudev.com 3.selectbox http://aui.github. ...

  8. WebDriver高级应用实例(2)

    2.1在日期选择器上进行日期选择 被测网页的网址: https://www.html5tricks.com/demo/Kalendae/index.html Java语言版本的API实例代码 impo ...

  9. javascript开源大全

    javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...

随机推荐

  1. Linux中同步与异步、阻塞与非阻塞概念以及五种IO模型

    1.概念剖析 相信很多从事linux后台开发工作的都接触过同步&异步.阻塞&非阻塞这样的概念,也相信都曾经产生过误解,比如认为同步就是阻塞.异步就是非阻塞,下面我们先剖析下这几个概念分 ...

  2. Centos7 install Openstack Juno (RDO) (转载)

    原文地址:http://www.hdume.com/centos-7-0%E5%AE%89%E8%A3%85openstack/ 1.安装系统,Centos7镜像采用CentOS-7.0-1406-x ...

  3. luogu2766 最长不下降子序列问题

    第一问DP水过.dp[i]代表以i结尾的最长不下降子序列长度. 二三问网络流. 第二问是说每个子序列不能重复使用某个数字. 把每个点拆成p(i),q(i).连边. 要是dp[i]=1,连源,p(i) ...

  4. 大数据学习——sparkRDD

    https://www.cnblogs.com/qingyunzong/p/8899715.html 练习1:map.filter //通过并行化生成rdd val rdd1 = sc.paralle ...

  5. appium安装,和遇到的问题

    https://www.cnblogs.com/fnng/p/4540731.html Appium环境搭建时在cmd中输入appium-doctor命令,提示’appium-doctor’ 不是内部 ...

  6. Python_Virtualenv及Pycharm配置

    Virtualenv存在的意义 在Python使用过程中,你是否有遇到过同时需要开发多个应用的情况? 假设A应用需要使用DJango1.X版本,而B应用需要使用DJango2.X的版本,而你全局开发环 ...

  7. 【NOIP2017】逛公园 拆点最短路+拓扑(记忆化搜索

    题目描述 策策同学特别喜欢逛公园.公园可以看成一张N个点M条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,N号点是公园的出口,每条边有一个非负权值, 代表策策经过这条边所要花的时间. 策 ...

  8. 深度理解STL之map、set

    课程设计做了这个一直没有整理(搬运 set算是关键字和相同的特殊map set应该更加被强调理解为“集合”,而集合所涉及的操作并.交.差等,即STL提供的如交集set_intersection().并 ...

  9. 九度oj 题目1177:查找

    题目描述: 读入一组字符串(待操作的),再读入一个int n记录记下来有几条命令,总共有2中命令:1.翻转  从下标为i的字符开始到i+len-1之间的字符串倒序:2.替换  命中如果第一位为1,用命 ...

  10. POJ 1323 Game Prediction

    Game Prediction Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8956   Accepted: 4269 D ...