<!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/2017',
color: '#577e9a', // Unlimited Colors
color2: '#57c8bf', // Unlimited Colors
lang: 'TR'
});
$('#yourId2').jalendar({
color: '#fff',
type: 'linker',
customUrl: 'http://www.lanrenzhijia.com/?var=',
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/2017',
color: '#52D3D5',
color2: '#52D5A4',
type: 'range',
lang: 'TR',
done: function() {
alert( $('#yourId4 input.data1').val() + ' / ' + $('#yourId4 input.data2').val() );
}
});
});
</script>
</head>
<body><script src="/demos/googlegg.js"></script>
<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><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></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><div id="yourId2" class="jalendar"></div></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><div id="yourId3" class="jalendar"></div></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><div id="yourId4" class="jalendar"></div></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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>�
jQuery日期选择插件jalendar2.zip （11个子文件） 
js 
highlight.pack.js 12KB documentation.js 429B jalendar js jalendar.min.js 10KB jquery-1.10.2.min.js 91KB style jalendar.css 10KB style bootstrap.min.css 120KB documentation.css 6KB default.min.css 2KB img 
features-bg.jpg 136KB
code-bg.png 3KB
index.html 8KB资源评论
