Kalendae使用总结
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使用总结的更多相关文章
- 基于JS功能强大的日期插件Kalendae
开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...
- 一款灵活好用的日历控件Kalendae
Kalendae是一款纯js不依赖任何js库的日历控件,可以轻松实现显示月份数量,当前选中多个日期,并可以按照周等你想要的格式去定制选中项. 下载地址:GitHub/Kalendae 第一步:Kale ...
- 日期插件kalendae,遇到的一些问题
1.日期中文显示 /*_months : 'January_February_March_April_May_June_July_August_September_October_November_D ...
- 日期多选插件Kalendae.js
在项目中要实现日期多选的功能,于是在网上找到Kalendae.js,此文主要记录本人对于Kalendae.js的一些用法,以便以后查阅,希望对读者也有所帮助 主要内容如下: Kalendaejs一句话 ...
- JavaScript日期选择控件Kalendae
在线演示 本地下载
- 9款精致HTML5/jQuery日历时钟控件源码下载(源码请见百度云) 链接:http://pan.baidu.com/s/1geIXe75 密码:7m4a
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- WEB 前端开发插件整理
下拉框插件 1.select http://select2.github.io/ 2.双 select http://loudev.com 3.selectbox http://aui.github. ...
- WebDriver高级应用实例(2)
2.1在日期选择器上进行日期选择 被测网页的网址: https://www.html5tricks.com/demo/Kalendae/index.html Java语言版本的API实例代码 impo ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
随机推荐
- 用decimal模块增加python的浮点数精度
浮点数python默认是17位精度,也就是小数点后16位(16位以后的全部四舍五入了),虽然有16位,但是这个精度越往后越不准. 如果有特殊需求,需要更多的精度,可以用decimal模块,通过更改其里 ...
- HDU:1269-迷宫城堡(tarjan模板)
迷宫城堡 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descri ...
- Python虚拟机之异常控制流(五)
Python中的异常控制语义结构 在Python虚拟机之异常控制流(四)这一章中,我们考察了Python的异常在虚拟机中的级别上是什么东西,抛出异常这个动作在虚拟机的级别上对应的行为,最后,我们还剖析 ...
- webdriver高级应用- 禁止IE的保护模式
#encoding=utf-8 from selenium import webdriver from selenium.webdriver.common.desired_capabilities i ...
- Selenium WebDriver-网页的前进、后退、刷新、最大化、获取窗口位置、设置窗口大小、获取页面title、获取网页源码、获取Url等基本操作
通过selenium webdriver操作网页前进.后退.刷新.最大化.获取窗口位置.设置窗口大小.获取页面title.获取网页源码.获取Url等基本操作 from selenium import ...
- python之路 --- python模块初认识&数据类型
一.模块初识 首先,文件名不能和导入的模块名称一样.因为系统默认先从当前文件寻找模块名,如果文件名和导入的模块名称一样的话,就相当于自己调用自己,会找不到相应的方法的. sys模块 sys.path ...
- java作业 4
public class dog { /** * @param args */ public static void main(String[] args) { // TODO Auto-gen ...
- 2.启动ABP ASP.NET ZERO
1.使用VS2017打开项目,等待自动还原程序包结束 2.生成项目,确保项目全部生成成功 3.生成数据库 (1).将项目“MyCompanyName.AbpZeroTemplate.EntityFra ...
- 设计模式(一)单例模式:实现 Serializable 接口之后的额外操作
思想: 一个单例类,无论采取哪一种设计(单元素枚举类除外), 一旦间接或者直接实现 Serializable 接口,为了保证单例,就要多增加一点考虑:保证类在反序列化之后能够保证单例. public ...
- Welcome-to-Swift-15反初始化(Deinitialization)
在一个类的实例被释放之前,反初始化函数被立即调用.用关键字deinit来标示反初始化函数,类似于初始化函数用init来标示.反初始化函数只适用于类类型. 反初始化原理 Swift会自动释放不再需要的实 ...