jquery ui datepicker使用

在Web開發中，總會遇到須要用戶輸入日期的狀況。通常都是提供一個text類型的input供用戶輸入日期。然而，這種方式，開發人員必須對用戶輸入的日期進行驗證，判斷其合法性。除此以外，用戶輸入日期也是一件不爽的事，若是用戶能夠直接選擇日期，這兩個問題都解決了。聽起來很不錯。實際上，不少開發者都是這麼作的。 

咱們能夠本身用javascript寫一個日期選擇控件，然而，想要寫的很好、很漂亮卻須要花很多時間和精力。jQuery有一個UI插件：datepicher，能夠幫咱們實現該功能，並且界面很漂亮。下面就學學如何使用它吧。 

datepicher插件是jQuery UI的一個插件，它提供一個日期彈出窗口（或直接顯示在頁面），供用戶選擇日期。 

datepicher插件的使用很簡單，語法以下：

$("#regDate").datepicher(optional);

　　其中optional是一個對象，該對象的每個屬性及含義能夠參看官方文檔：http://jqueryui.com/demos/datepicker/。在此，僅介紹一些經常使用的屬性。 

一、datepicher最簡單的使用 

Javascript代碼  

$("#regDate").datepicher();   

　　其中,regDate是頁面日期輸入框的ID屬性值。 

就這一句話，在日期輸入框得到焦點時，就會彈出一個日期選擇窗口。然而，這時候的日期選擇窗口有不少不方便的地方，好比：只能一個月一個月的往前或日後，沒有關閉按鈕等。 

二、配置datepicher 

經過給datepicher設置一些屬性值能夠改變默認的顯示。如：

$("#regDate").datepicker(      
{      
  showMonthAfterYear: true, // 月在年以後顯示      
  changeMonth: true,   // 容許選擇月份      
  changeYear: true,   // 容許選擇年份      
  dateFormat:'yy-mm-dd',  // 設置日期格式      
  closeText:'關閉',   // 只有showButtonPanel: true纔會顯示出來      
  duration: 'fast',      
  showAnim:'fadeIn',      
  showOn:'button',   // 在輸入框旁邊顯示按鈕觸發，默認爲：focus。還能夠設置爲both      
  buttonImage: 'images/commons/calendar.gif',   // 按鈕圖標      
  buttonImageOnly: true,        // 不把圖標顯示在按鈕上，即去掉按鈕      
  buttonText:'選擇日期',      
  showButtonPanel: true,      
  showOtherMonths: true,      
 //appendText: '(yyyy-mm-dd)',      
}); 

　　這個時候的日期選擇就很方便了。能夠自由選擇年份和月份。 

三、增長清除按鈕和日期判斷功能（加強版datepicher1.7.2） 

datepicher1.7.2版本沒有提供清除按鈕，這讓人有點遺憾。（好像以前的版本有提供）。沒有清除按鈕是很不方便的，特別是輸入框得到焦點就彈出日期選擇窗口的狀況更是如此，由於這時想要清除輸入框中的日期比較麻煩。在此推薦一位網友提供的加強版datepicher1.7.2。該加強版datepicher1.7.2不只實現了清除按鈕功能，並且增長了日期大小比較驗證，好比：一個日期只能在另外一個以後。能夠訪問該網址查看：http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html。這時datepicher的使用已經至關完美：

$(function()      
{      
$("#effDate").datepicker(      
{      
  showMonthAfterYear: true, // 月在年以後顯示      
  changeMonth: true,   // 容許選擇月份      
  changeYear: true,   // 容許選擇年份      
  dateFormat:'yy-mm-dd',  // 設置日期格式      
  showClearButton: true,      
 //clearText: '清除',      
  closeText:'關閉',   // 只有showButtonPanel: true纔會顯示出來      
  duration: 'fast',      
  showAnim:'fadeIn',      
  showOn:'button',      
  buttonImage: 'images/commons/calendar.gif',      
  buttonImageOnly: true,      
  buttonText:'選擇日期',      
  showButtonPanel: true,      
  showOtherMonths: true,      
 //appendText: '(yyyy-mm-dd)',      
  onSelect: function(dateText, inst)    // 使結束時間大於開始時間      
  {      
  /**  
    * 如下寫法在IE中出現問題。  
    * $('#expDate').datepicker('option', 'minDate', new Date(dateText.replace(/-/g,',')));  
    * 時，在結束（過時時間）選擇時，年會沒有，並且控制會失效。經過調試，發現new Date(dateText.replace(/-/g,','))  
    * 返回的結果是NaN。說明Date對象不能這麼構造（可是Firefox能夠）  
    */      
   var arys = new Array();      
   var arys = dateText.split('-');      
    $('#expDate').datepicker('option', 'minDate', new Date(arys[0],arys[1]-1,arys[2]));      
  }      
});      
     
$("#expDate").datepicker(      
{      
  showMonthAfterYear: true, // 月在年以後顯示      
  changeMonth: true,   // 容許選擇月份      
  changeYear: true,   // 容許選擇年份      
  dateFormat:'yy-mm-dd',  // 設置日期格式      
  showClearButton: true,  // 自定義的方法(1.7.2沒有清除按鈕）      
 //clearText: '清除',    // 自定義的文本，在文檔在有定義（js中）      
  closeText:'關閉',   // 只有showButtonPanel: true纔會顯示出來      
  duration: 'fast',      
  showAnim:'fadeIn',      
  showOn:'button',   // 在輸入框旁邊顯示按鈕觸發，默認爲：focus。還能夠設置爲both      
  buttonImage: 'images/commons/calendar.gif',   // 按鈕圖標      
  buttonImageOnly: true,        // 不把圖標顯示在按鈕上，即去掉按鈕      
  buttonText:'選擇日期',      
  showButtonPanel: true,      
  showOtherMonths: true,      
 //appendText: '(yyyy-mm-dd)',      
  onSelect: function(dateText, inst)      
  {      
  var arys = new Array();      
  var arys = dateText.split('-');      
   $('#effDate').datepicker('option','maxDate',new Date(arys[0],arys[1]-1,arys[2]));      
  }      
});      
});    

　　四、國際化 

datepicher提供了國際化的功能。只需將ui.datepicker-zh-CN.js導入頁面便可。（或者導入jquery-ui-i18n.js，該文件包含了不少中語言）注意，若是想使用上面提到的加強版datepicher1.7.2，則須要下載做者提供的國際化文件。另外，若是用Eclipse之類的工具編碼，注意用eclipse打開國際化文件看看，頗有可能顯示爲亂碼。只須要把文件的編碼格式改成utf-8，而後用其餘編輯工具，如editplus打開國際化文件，拷貝，粘貼覆蓋eclipse中的，保存就OK了。 

五、國際化爲中文可能遇到的顯示問題 

在使用國際化同時啓用changeYear和changeMonth後，兩個select顯示爲兩行，很很差看。找了很久，發如今官方提供的jquery-ui-1.7.2.custom.css中，應該做以下幾處修改： 

.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; } 

　　應該改成： 

.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 47%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; } 

　　

就OK了 

六、換膚 

jQuery UI預約義了不少皮膚，下載後，只需在頁面引入相應皮膚的jquery-ui-1.7.2.custom.css能夠實現換膚。若是給用戶提供換膚功能，能夠經過js控制，實現換膚。 

總結： 

能夠看出，datepicher是一個很好用的插件，比本身寫的確定要好用不少，推薦你們使用。 

另外，在使用中，能夠定義一個文件，包含該插件的使用，配置好。之後有須要使用的地方，引入該文件，同時傳給當前須要使用日期選擇控件的id屬性，這樣即可以只配置一次了。

 

 

其餘實用方法：

 

使用方法：

1.限制日期

$("#resultDiv").datepicker({                onSelect: function (dateText, inst) {                    //代碼：選擇日期後觸發的事件                },                minDate: new Date(),//最小日期                maxDate: new Date($("#DateLimit").val())//最大日期            });

　　2.中文

jQuery(function ($) {        $.datepicker.regional['zh-CN'] = {            closeText: '關閉',            prevText: '<上月',            nextText: '下月>',            currentText: '今天',            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',                '七月', '八月', '九月', '十月', '十一月', '十二月'],            monthNamesShort: ['一', '二', '三', '四', '五', '六',                '七', '八', '九', '十', '十一', '十二'],            dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],            dayNamesShort: ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],            weekHeader: '周',            dateFormat: 'yy-mm-dd',            firstDay: 1,            isRTL: false,            showMonthAfterYear: true,            yearSuffix: '年'        };        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);    });

　　

開始日期(minDate)和結束日期(maxDate)

下面爲兩種實現步驟：

 

思路一：

第一步  實現兩個datepicker組件。

 須要定義兩個input標籤，類型爲text，並指定id屬性

HTML代碼以下

開始日期：<input type="text" id="start">

結束日期：<input type="text" id="end">

 在js代碼中獲得兩個input元素的jQuery對象，並將其轉化爲datepicker組件

Js代碼以下

$(document).ready(function(){  
 
   $("#start").datepicker();  
 
   $("#end").datepicker();  
 
}); 

　　

實現以上操做後，在頁面中點擊文本框，若是出現datepicker則表明成功。

 

第二步  設置開始和結束日期

 當選擇開始日期的值後，則結束日期的最小值應該就是開始日期；同理，當選擇結束日期後，開始日期的最大值則應該是結束日期。咱們能夠利用datepicker中的onSelect屬性來設置當選擇指定日期後觸發的事件，經過該事件來指定對應的datepicker最小日期或最大日期。

Js代碼以下

$("#start").datepicker({  
 
   onSelect:function(dateText,inst){  
 
      $("#end").datepicker("option","minDate",dateText);  
 
   }  
 
});  
 
$("#end").datepicker({  
 
   onSelect:function(dateText,inst){  
 
       $("#start").datepicker("option","maxDate",dateText);  
 
   }  
 
});  

　　

注：匿名函數中的dateText屬性爲當前選擇日期的字符串

思路二：

第一步  同時得到兩個文本框對象，並將其轉換爲datepicker（利用jQuery的選擇器）

HTML代碼以下

開始日期：<input type="text" id="start">

結束日期：<input type="text" id="end">

Js代碼以下

var dates = $("#start,#end");  
 
dates.datepicker();

　　

第二步  一樣在選擇日期後，觸發onSelect事件，調用函數傳遞selectedDate參數，

函數體中首先判斷觸發事件的是開始日期仍是結束日期，經過該判斷來指定設置minDate或者是maxDate，而後利用not()函數，來反向選擇另外一個datepicker對象，並設置其對應的屬性。

Js代碼以下

dates.datepicker({  
 
   onSelect: function(selectedDate){  
 
      var option = this.id == "start" ? "minDate" : "maxDate";  
 
      dates.not(this).datepicker("option", option, selectedDate);  
 
   }  
 
}); 

　　這樣在設置一方後，另外一方就會被限制了。