日期控件 kalendae.js 简单用法-CSDN博客

本文链接：https://blog.csdn.net/djk8888/article/details/81324167

kalendae.js 最大特点是不依赖 jQuery等等，用起来也很方便

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="Kalendae-master/build/kalendae.css" type="text/css" charset="utf-8">
    <script src="Kalendae-master/build/kalendae.standalone.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>文本框弹出日期控件</p>
    <input type="text" class="auto-kal" data-kal="months: 2,mode:'multiple'" style="width:250px;" id="txtDay">
    <input type="button" value="获得选中日期" id="btnDay" />
    <script type="text/javascript">
        $(function () {
            $("#btnDay").click(function () {
                var day = $("#txtDay").val();
                alert(day);
            });
        });
    </script>
    <br /><hr /><br />
    <p>日期框多选日期</p>
    <div id="datepk"></div>
    <input type="button" id="btnDay2" value="选中的日期" />
    <script type="text/javascript">
        $(function () {
            var kal = new Kalendae(document.getElementById("datepk"), {
                months: 3,
                mode: 'multiple',
                dayHeaderClickable: true,
            });
            $('#btnDay2').click(function () {
                alert(kal.getSelected());//获取选中的日期
            });
        });
    </script>
</body>
</html>