jQuery日期插件jalendar2 js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery日期插件jalendar2 js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery日期插件jalendar2</title> 
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/documentation.css">

<!-- Jalendar files -->
<link rel="stylesheet" href="jalendar/style/jalendar.css" type="text/css" />
<script type="text/javascript" src="jalendar/js/jquery-1.10.2.min.js"></script><!--jQuery-->
<script type="text/javascript" src="jalendar/js/jalendar.min.js"></script>
<!-- Jalendar files #end -->

<link rel="stylesheet" href="style/default.min.css" media="screen" type="text/css">
<script src="js/highlight.pack.js"></script>
<script src="js/documentation.js"></script>

<script type="text/javascript">
$(function () {

    $('#yourId').jalendar({
        customDay: '11/01/2015',
        color: '#577e9a', // Unlimited Colors
        color2: '#57c8bf', // Unlimited Colors
        lang: 'TR'
    });

    $('#yourId2').jalendar({
        color: '#fff',
        type: 'linker',
        customUrl: '#',
        dateType: 'mm-dd-yyyy',
        titleColor: '#333',
        weekColor: '#EA5C49',
        todayColor: '#EA5C49'
    });

    $('#yourId3').jalendar({
        type: 'selector',
        dateType: 'yyyy-mm-dd',
        done: function() {
            alert( $('#yourId3 input.data1').val() );
        }
    });

    $('#yourId4').jalendar({
        customDay: '04/03/1987',
        color: '#52D3D5',
        color2: '#52D5A4',
        type: 'range',
        lang: 'TR',
        done: function() {
            alert( $('#yourId4 input.data1').val() + ' / ' + $('#yourId4 input.data2').val() );
        }
    });
});
</script>

</head>

<body>


<div id="fb-root"></div>

<div class="container-fluid">

    <div class="row features"></div>
        
    <div class="row demos">

        <div class="tab" data-name="a">
            <a href="javascript:;" class="selected">Jalendar <small>Event</small></a>
            <a href="javascript:;">Jalendar <small>Linker</small></a>
            <a href="javascript:;">Jalendar <small>Selector</small></a>
            <a href="javascript:;">Jalendar <small>Range</small></a>
        </div>

        <div class="tab-container" data-name="a">
            
            <div class="tab-content selected">

                    <div class="container">

                        <div class="row">
                            <div class="col-sm-8">

                                <h1>Jalendar <small>Event</small></h1>

                                <pre class="html">
                                    <code>&lt;div id="yourId" class="jalendar"&gt;
    &lt;div class="added-event" data-date="19-11-2015" data-title="WWDC 13 on San Francisco, LA"&gt;&lt;/div&gt;
    &lt;div class="added-event" data-date="19-11-2015" data-title="Hazal ve Bora Nikah Töreni"&gt;&lt;/div&gt;
    &lt;div class="added-event" data-date="21-11-2015" data-title="Hazal ve Bora Nikah Töreni"&gt;&lt;/div&gt;
    &lt;div class="added-event" data-date="22-11-2015" data-title="Hazal ve Bora Nikah Töreni at 21"&gt;&lt;/div&gt;
    &lt;div class="added-event" data-date="10-12-2015" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"&gt;&lt;/div&gt;
&lt;/div&gt;</code>
</pre>

                                <pre class="js">
                                    <code>$('#yourId').jalendar({
    customDay: '01/11/2015',
    color: '#577e9a', // Unlimited
    color2: '#57c8bf', // Unlimited
    lang: 'TR'
});</code>
</pre>


                            </div>
                            <div class="col-sm-4">

                                <div id="yourId" class="jalendar">
                                    <div class="added-event" data-date="19-11-2015" data-title="WWDC 13 on San Francisco, LA"></div>
                                    <div class="added-event" data-date="19-11-2015" data-title="Hazal ve Bora Nikah Töreni"></div>
                                    <div class="added-event" data-date="21-11-2015" data-title="Hazal ve Bora Nikah Töreni"></div>
                                    <div class="added-event" data-date="22-11-2015" data-title="Hazal ve Bora Nikah Töreni at 21"></div>
                                    <div class="added-event" data-date="10-12-2015" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
                                </div>

                            </div>
                        </div>
                    </div>

            </div>
            <div class="tab-content">
                
                <div class="container">

                    <div class="row">

                        <div class="col-sm-8">

                            <h1>Jalendar <small>Linker</small></h1>

                            <pre class="html">
                                <code>&lt;div id="yourId2" class="jalendar"&gt;&lt;/div&gt;</code>
</pre>
                            
                            <pre class="js">
                                <code>$('#yourId2').jalendar({
    color: '#fff',
    type: 'linker',
    customUrl: 'http://yourcustomurl.com/yourcustomurl?var=',
    dateType: 'mm-dd-yyyy',
    titleColor: '#666',
    weekColor: '#EA5C49',
    todayColor: '#EA5C49'
});</code>
</pre>
                        </div>
                        <div class="col-sm-4">
                            <div id="yourId2" class="jalendar"></div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="tab-content">
                
                <div class="container">

                    <div class="row">
                    
                        <div class="col-sm-8">

                            <h1>Jalendar <small>Selector</small></h1>

                            <pre class="html">
                                <code>&lt;div id="yourId3" class="jalendar"&gt;&lt;/div&gt;</code>
</pre>

                            <pre class="js">
                                <code>$('#yourId3').jalendar({
    type: 'selector',
    dateType: 'yyyy-mm-dd',
    done: function() {
        alert( $('#yourId3 input.data1').val() );
    }
});</code>
</pre>
                        </div>
                        <div class="col-sm-4">
                            <div id="yourId3" class="jalendar"></div>
                        </div>

                    </div>

                </div>

            </div>

            <div class="tab-content">
                
                <div class="container">

                    <div class="row">
                    
                        <div class="col-sm-8">

                            <h1>Jalendar <small>Range</small></h1>

                            <pre class="html">
                                <code>&lt;div id="yourId4" class="jalendar"&gt;&lt;/div&gt;</code>
</pre>

                            <pre>
                                <code>$('#yourId4').jalendar({
    color: '#37C4A7',
    type: 'range',
    lang: 'TR',
    done: function() {
        alert($('#yourId4 input.data1').val() + ' / ' + $('#yourId4 input.data2').val())
    }
});</code>
</pre>
                        </div>
                        <div class="col-sm-4">
                            <div id="yourId4" class="jalendar"></div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

JS代码(documentation.js):

$(function (){
	hljs.initHighlightingOnLoad();
	// tab action$('.tab a').click(function(event){
	var tabSel = $('.tab-container[data-name=' + $(this).parents('.tab').attr('data-name') + ']');
	tabSel.find('.tab-content').removeClass('selected');
	tabSel.find('.tab-content').eq($(this).index()).addClass('selected');
	$(this).parents('.tab').find('a').removeClass('selected');
	$(this).addClass('selected');
}
);
}
);

CSS代码(documentation.css):

@import url(http://fonts.googleapis.com/css?family=Cabin:400,600,700);@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);body{font:400 16px 'Cabin','Helvetica Neue','Arial',sans-serif;line-height:26px;}
h1{font:700 40px 'Cabin','Helvetica Neue','Arial',sans-serif;color:#333;margin:0 0 30px 0;}
a{color:#EA5C49;}
a:hover{color:#EA5C49;}
pre{background:url('../img/code-bg.png') #ffffff !important;padding:0 30px 0 30px !important;box-shadow:0 0 0 1px rgba(0,0,0,0.15),0 1px 4px rgba(0,0,0,0.2) !important;border-radius:2px !important;display:block;color:#555 !important;margin:30px 0 30px 0 !important;border:none !important;position:relative;}
pre.html:before,pre.js:before{display:inline-block;font:700 9px 'Cabin','Helvetica Neue','Arial',sans-serif;background-color:rgba(0,0,0,0.2);border-radius:0 0 0 3px;color:#fff;padding:3px 6px;position:absolute;right:0;top:0;}
pre.html:before{content:'HTML';}
pre.js:before{content:'JS';}
pre code{background:transparent !important;padding:0 !important;margin:0 !important;overflow-y:hidden;overflow-x:auto;max-height:700px;width:100%;}
pre code .opacity{opacity:0.4;}
.text-center{text-align:center;}
a.button{padding:14px 36px;border-radius:4px;background-color:#EA5C49;color:#fff;text-decoration:none;display:inline-block;font:700 16px 'Cabin','Helvetica Neue','Arial',sans-serif;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-ms-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}
a.button:hover{background-color:transparent;box-shadow:inset 0 0 0 1px #EA5C49;color:#EA5C49;}
ul.nav{margin:0;padding:0;font-size:0;text-align:center;box-shadow:0 1px 0 rgba(0,0,0,0.1);}
ul.nav li{padding:0;margin:0;display:inline-block;font:700 14px 'Cabin','Helvetica Neue','Arial',sans-serif;}
ul.nav li a{color:rgba(0,0,0,0.4);display:inline-block;width:100%;padding:30px 30px;}
ul.nav li a.selected,ul.nav li a:hover{color:rgba(0,0,0,0.8);background-color:transparent;}
.jalendar-input input{padding:10px 15px;font:15px 'Helvetica Neue','Arial';border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.1);outline:none;border:none;width:280px;cursor:pointer;}
.container.white{background-color:#fff;margin-top:40px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);padding:40px 60px 1px 60px;}
.header{background-color:#EA5C49;}
.header.header-mini > .container{padding:0;}
.header > .container{padding:80px 0 150px 0;}
.header .logo{border-bottom:1px solid rgba(255,255,255,0.2);padding:40px 0;margin:0;}
.header p.mini-desc{font:400 30px 'Cabin','Helvetica Neue','Arial',sans-serif;line-height:48px;color:#fff;padding:40px 0;letter-spacing:1px;margin:0;}
.footer{border-top:1px solid rgba(0,0,0,0.1);padding:50px 0;text-align:center;margin:50px 0 0 0;}
.footer .sharing{margin:0 0 30px 0;}
.footer .sharing > div{display:inline-block;margin:0 20px;}
.features{padding:100px 0 150px 0;text-align:center;background:url(../img/features-bg.jpg) no-repeat top center;background-size:100% auto;}
.features .title{font:700 26px 'Cabin','Helvetica Neue','Arial',sans-serif;color:#333;}
.features p{font:16px/26px 'Helvetica Neue','Arial';color:#666;padding:20px 0 0 0;}
.demos{margin-top:-110px;}
.demos .see-demos{text-align:center;padding:20px 0;font:700 14px 'Cabin','Helvetica Neue','Arial',sans-serif;border-top:1px solid rgba(0,0,0,0.1);}
.demos.detail{margin-top:0 !important;margin-left:-59px;margin-right:-59px;}
.demos.detail .container{padding-left:60px;padding-right:60px;}
.container-fluid .tab-content{padding-top:80px !important;padding-bottom:80px !important;}
.container-fluid .tab-content h1{font:700 40px 'Cabin','Helvetica Neue','Arial',sans-serif;margin:0 0 30px 0;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.1);}
.container-fluid .tab-content h1 small{font-size:40px;font-weight:400;color:rgba(0,0,0,0.2);}
.container-fluid .tab-content p{margin:10px 0;padding:0;font:400 14px 'Cabin','Helvetica Neue','Arial',sans-serif;line-height:24px;color:#333;}
.container-fluid .tab-content:nth-child(1),.tab a:nth-child(1){background-color:#D9FFF7;}
.container-fluid .tab-content:nth-child(2),.tab a:nth-child(2){background-color:#FFDDD9;}
.container-fluid .tab-content:nth-child(3),.tab a:nth-child(3){background-color:#EFFFD9;}
.container-fluid .tab-content:nth-child(4),.tab a:nth-child(4){background-color:#EADAED;}
/* tab */
.tab{display:block;text-align:center;font-size:0;}
.tab > a{display:inline-block;padding:14px 36px;position:relative;border-radius:3px 3px 0 0;color:rgba(0,0,0,0.5);text-decoration:none;margin:0 1px;font:700 16px 'Cabin','Helvetica Neue','Arial',sans-serif;}
.tab > a:hover{box-shadow:inset 0 -4px 0 0 rgba(0,0,0,0.05);}
.tab > a.selected{color:rgba(0,0,0,0.8);}
.tab > a.selected:hover{box-shadow:none;}
.tab > a small{font:400 12px 'Cabin','Helvetica Neue','Arial',sans-serif;}
.tab-container{display:inline-block;width:100%;}
.tab-container .tab-content{display:none;}
.tab-container .tab-content.selected{display:block;}
/* tab #end */
.row.continue{padding:80px 0;}

附件:下载该文件资源,减少时间成本(增值服务)