js日历选择控件

http://blog.oglen.net/?action=post&mask=70f010b1

JCalendar (JS日历插件) Javascript extend JQuery - 编程

Justin - 2011年6月16日 21:29:57

这是一个 Javascript 编写的日历插件。

包含两个脚本文件：

1. jcalendar.js
2. jcalendar.css

以及一个文件夹 images, 内有4个图片文件:

1. icon_down.png
2. icon_reset.png
3. icon_top.png
4. icon_cross.png

引用：

1. 在你的网页中引用 jcalendar.js 和 jcalendar.css
2. 使 images 文件夹与引用页位于同一地址

参数：

1. jcalendar()
2. jcalendar(callback)
3. jcalendar(signDate, callback)
4. jcalendar(beginDate, endDate)
5. jcalendar(beginDate, endDate,  callback)
6. jcalendar(signDate, beginDate, endDate)
7. 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>

点击运行 Sample_a

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>

点击运行 Sample_b

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" />

点击运行 Sample_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" />

点击运行 Sample_d

  下载 JCalendar