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

Kalendae是一款纯js不依赖任何js库的日历控件，可以轻松实现显示月份数量，当前选中多个日期，并可以按照周等你想要的格式去定制选中项。

第一步：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")[], { months: , 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 = ; 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"选择日期范围。

秒客网

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

相关文章