溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

日歷插件js，直接可以使用

發(fā)布時(shí)間：2020-06-14 11:31:31 來(lái)源：網(wǎng)絡(luò) 閱讀：1095 作者：lyzyz8908 欄目：web開(kāi)發(fā)

下邊完整代碼可以試試，css和js文件路徑自己改動(dòng)一下就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問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手