zoukankan      html  css  js  c++  java
  • 一款灵活好用的日历控件Kalendae

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

    下载地址: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"选择日期范围。

  • 相关阅读:
    Linq to Sql学习总结1
    SQL相关
    C#各种小知识点总结
    Ext.Net学习笔记
    ASP.NET MVC3入门学习总结
    leetcode-剑指67-OK
    leetcode-剑指44-OK
    leetcode-剑指51-OK
    leetcode-剑指32-III-OK
    leetcode-剑指49-OK
  • 原文地址:https://www.cnblogs.com/loyung/p/4964806.html
Copyright © 2011-2022 走看看