JQuery 1.32 DatePicker 增强版

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html

文章标签：

#javascript #ui #ViewUI

本文介绍如何使用jQuery UI的DatePicker插件来实现日期选择功能，包括添加清除按钮、自动验证日期格式以及设置日期范围限制等实用技巧。

增加部分JS代码实现“清除”按钮

< script type = " text/javascript " >
$(function() {
$( " #datepicker " ).datepicker({closeText: ' X ' ,showButtonPanel: true ,showClearButton: true ,minDate: new Date( 2009 , 7 , 10 )});
});
</ script >

自动禁选日期段的写法：

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

$( " #start-date " ).datepicker(
        {onSelect: function(dateText, inst) {$( ' #end-date ' ).datepicker( ' option ' , ' minDate ' , new Date(dateText.replace( ' - ' , ' , ' )));}
        });

    $( " #end-date " ).datepicker(
        {onSelect: function(dateText, inst) {$( ' #start-date ' ).datepicker( ' option ' , ' maxDate ' , new Date(dateText.replace( ' - ' , ' , ' )));}
        });
    });
</ script >

程序源码及更多DatePicker的用法实例下载：

/Files/yasin/Jquery_datepicker.zip

DatePicker官方地址：

http://docs.jquery.com/UI/API/1.7/Datepicker#method-option

2009-07-13 增加焦点失去后自动验证日期格式

_doblur:function( event )
    {
        var inst = $.datepicker._getInst( event .target);

         if (inst.input[ 0 ].value.length == 0 ) // 允许为空
             return ;

        var reg =/^ (\d{ 4 })(\ /|- )(\d{ 1 , 2 })\ 2 (\d{ 1 , 2 })$ / ;
        var arr = inst.input[ 0 ].value.match(reg)
         if (arr == null )
        {
            alert( " 错误的时间格式,请按格式填写\n 如: 2012-12-22 " );
            var today = new Date(); // 设置为当前日期
            inst.input[ 0 ].value = today.getYear() + " - " + (today.getMonth() + 1 ) + " - " + today.getDate();
            inst.input[ 0 ].focus();
             return ;
        }
        var tempDate = new Date(arr[ 1 ],arr[ 3 ] - 1 ,arr[ 4 ]);
         if ((tempDate.getFullYear() == arr[ 1 ] && (tempDate.getMonth() + 1 ) == arr[ 3 ] && tempDate.getDate() == arr[ 4 ]) == false )
        {
            alert( " 错误的时间格式,请按格式填写\n 如: 2012-12-22 " );
            var today = new Date(); // 设置为当前日期
            inst.input[ 0 ].value = today.getYear() + " - " + (today.getMonth() + 1 ) + " - " + today.getDate();
            inst.input[ 0 ].focus();
            return ;
        }
    },

转载于:https://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html