温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

日历插件js,直接可以使用

发布时间:2020-06-14 11:31:31 来源:网络 阅读:1096 作者:lyzyz8908 栏目:web开发

下边完整代码可以试试,css和js文件路径自己改动一下就ok
 

日历插件js,直接可以使用


<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="js03/kalendae.css" type="text/css" charset="utf-8"/>
    <script src="js03/kalendae.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
        .kalendae span.closed {
            red;
        }
    </style>
</head>
<body>
    <h2>Kalendae</h2>
    <p>Single Select</p>
    <script type="text/javascript" charset="utf-8">
        new Kalendae(document.body, {
            months: 1,
            mode: 'single',
            selected: Kalendae.moment().subtract({ M: 1 })
        });

        new Kalendae({
            attachTo: document.body,
            months: 2,
            mode: 'single',
            selected: Kalendae.moment().subtract({ M: 1 })
        });

        new Kalendae({
            attachTo: document.body,
            months: 3,
            mode: 'single',
            selected: Kalendae.moment().subtract({ M: 1 })
        });
    </script>
       
    <p>Range Select</p>   
    <script type="text/javascript" charset="utf-8">
        new Kalendae(document.body, {
            months: 1,
            mode: 'range',
            selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
        });

        new Kalendae({
            attachTo: document.body,
            months: 2,
            mode: 'range',
            selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
        });

        new Kalendae({
            attachTo: document.body,
            months: 3,
            mode: 'range',
            selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
        });
    </script>
 
    <p>Multi-Select</p>
    <script type="text/javascript" charset="utf-8">
        new Kalendae(document.body, {
            months: 1,
            mode: 'multiple',
            selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
        });

        new Kalendae({
            attachTo: document.body,
            months: 2,
            mode: 'multiple',
            selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
        });

        new Kalendae({
            attachTo: document.body,
            months: 3,
            mode: 'multiple',
            selected: [Kalendae.moment().subtract({ M: 1 }), Kalendae.moment().add({ M: 1 })]
        });
       
 
    </script>
 
    <hr>
    <p>Blackout and Direction Tests</p>
   
    <script type="text/javascript" charset="utf-8">
        //direction
        new Kalendae(document.body, {
            months: 3,
            direction: 'future'
        });

        //direction
        new Kalendae(document.body, {
            months: 3,
            direction: 'past'
        });

        //blackout
        new Kalendae(document.body, {
            blackout: function (date) {
                return Kalendae.moment(date).date() % 2; //blackout every other day
            }
        });

        //blackout AND direction
        new Kalendae(document.body, {
            direction: 'future',
            blackout: function (date) {
                return [1, 0, 0, 0, 0, 0, 1][Kalendae.moment(date).day()]; //blackout weekends
            }
        });
               
    </script>
 
 
 
    <hr>
    <p>Class Map Test</p>
   
    <script type="text/javascript" charset="utf-8">
        //direction
        var classMap = [];
        classMap[Kalendae.moment().add({ d: 5 }).format('YYYY-MM-DD')] = 'closed';

        new Kalendae(document.body, {
            dateClassMap: classMap
        });
    </script>
    <hr>
 
    Click this input element: <input type="text" value="2/16/2012" id="input1">
    <script type="text/javascript" charset="utf-8">
        var k4 = new Kalendae.Input('input1', {
            months: 2
        });
    </script>
   
    <hr>
    This calendar is auto-created.
    <div class="auto-kal"></div>
   
    <hr>
    So is the one on this input.
    <input type="text" class="auto-kal"/>
   
</body>
</html>

附件:http://down.51cto.com/data/2362003
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI