一款灵活好用的日历控件Kalendae
2015-11-14 18:08
260 查看
Kalendae是一款纯js不依赖任何js库的日历控件,可以轻松实现显示月份数量,当前选中多个日期,并可以按照周等你想要的格式去定制选中项。
下载地址:GitHub/Kalendae
第一步:Kalendae引用
使用前需要引用样式文件kalendae.css和JS文件kalendae.standalone.js
第二步:未指定容器(控件)加载Kalendae
或者使用CSS方式直接加载日历控件
参数设置
使用JQ创建加载日历控件
第三步:使用参数说明
attachTo:将此日历控件加载至所在容器;
mode:控件选择模式,"single"单个日期选择,"multiple"多个日期选择,"range"选择日期范围。
下载地址:GitHub/Kalendae
第一步:Kalendae引用
使用前需要引用样式文件kalendae.css和JS文件kalendae.standalone.js
<link href="../App_Common/Kalendae/build/kalendae.css" rel="stylesheet" type="text/css" /> <script src="../App_Common/Kalendae/build/kalendae.standalone.js" type="text/javascript"></script>
第二步:未指定容器(控件)加载Kalendae
var ArrDate = $("#FACE_COURSE_TIME").val().split(","); kal = new Kalendae($("#SelectCourseDate")[0], { months: 2, mode: 'single', subscribe: { "change": function () { $("#SKDate input[type='radio'][value='{0}']".format(kal.getSelected())).attr("checked", true); } }, blackout: function (date) { var equal = false; for (var i = 0; i < ArrDate.length; i++) { if (Kalendae.moment(date).format("YYYY-MM-DD") == ArrDate[i]) equal = true; } //判断是否禁用 if (!equal) return true; } });
或者使用CSS方式直接加载日历控件
<div class="auto-kal"></div>
参数设置
<div class="auto-kal" data-kal="months: 3, direction: 'future'"></div>
使用JQ创建加载日历控件
$(selector).data('kalendae')
第三步:使用参数说明
attachTo:将此日历控件加载至所在容器;
mode:控件选择模式,"single"单个日期选择,"multiple"多个日期选择,"range"选择日期范围。
相关文章推荐
- Hadoop Yarn 框架原理及运作机制
- zcmu_1671
- android hal 学习——数据结构整理
- 搭建maven+spring+freemaker+mybatis环境之一
- 在Win7上安装VS2015 RC(候选发布版)失败完美解决方法
- python数据分析之股票实战
- 创建型模式:工厂方法模式(Factory Method)--分析优缺点
- 算法—2.插入排序
- POJ3107--Godfather(树的重心)
- 变长数据项排序
- VS2010远程调试 (2)
- Mybatis 中用# 和 $ 的区别
- python和php的面向对象
- 1029. Median (25)
- 网络设备将网口切换到业务板以后为什么会报各种不正确的信息?
- 1029. Median (25)
- 桶排序
- js子窗体与父窗体
- 基数排序
- 计数排序