http://blog.oglen.net/?action=post&mask=70f010b1
JCalendar (JS日历插件) Javascript extend JQuery - 编程
Justin - 2011年6月16日 21:29:57
这是一个 Javascript 编写的日历插件。
包含两个脚本文件:
- jcalendar.js
- jcalendar.css
以及一个文件夹 images, 内有4个图片文件:
- icon_down.png
- icon_reset.png
- icon_top.png
- icon_cross.png
引用:
- 在你的网页中引用 jcalendar.js 和 jcalendar.css
- 使 images 文件夹与引用页位于同一地址
参数:
- jcalendar()
- jcalendar(callback)
- jcalendar(signDate, callback)
- jcalendar(beginDate, endDate)
- jcalendar(beginDate, endDate, callback)
- jcalendar(signDate, beginDate, endDate)
- jcalendar(signDate, beginDate, endDate, callback)
用例:
1. 仅显示一个日历
jcalendar()
<script type="text/javascript">
$(function(){
$('#test_jcalendar_input_a').jcalendar();
$('#test_jcalendar_input_a').next().show();
});
</script>
<p id="test_jcalendar_input_a"></p>
2. 显示一个日历,并在日历上标记一个日期
jcalendar(signDate)
<script type="text/javascript">
$(function(){
var signDate = new Date(2011, 5, 4);
$('#test_jcalendar_input_b').jcalendar(signDate);
$('#test_jcalendar_input_b').next().show();
});
</script>
<p id="test_jcalendar_input_b"></p>
3. 显示一个日历,并在日历关闭时运行回调函数
jcalendar(callback)
<script type="text/javascript">
$(function(){
var signDate = new Date(2011, 5, 4);
var handle = $('#test_jcalendar_input_c');
handle.jcalendar(function(date){
handle.next().fadeOut(200);
if(date.constructor == Date){
var clickDate = date.getFullYear()+ '-'+ (date.getMonth()+1)+ '-'+ date.getDate();
handle.val(clickDate);
}
});
$('#test_jcalendar_input_c').click(function(){
$(this).next().fadeIn(200);
});
});
</script>
<input type="text" id="test_jcalendar_input_c" />
4. 显示一个日历,标记一个日期,设置可选日期范围,并在日历关闭时运行回调函数
jcalendar(signDate, beginDate, endDate, callback)
<script type="text/javascript">
$(function(){
var today = new Date();
var signDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
var beginDate = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
var endDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
var handle = $('#test_jcalendar_input_d');
handle.jcalendar(signDate, beginDate, endDate, function(date){
handle.next().fadeOut(200);
if(date.constructor == Date){
var clickDate = date.getFullYear()+ '-'+ (date.getMonth()+1)+ '-'+ date.getDate();
handle.val(clickDate);
}
});
$('#test_jcalendar_input_d').click(function(){
$(this).next().fadeIn(200);
});
});
</script>
<input type="text" id="test_jcalendar_input_d" />