jQuery UI 日期控件--datepicker

在web開發中，日期的輸入常常會遇到。咱們會用的解決方法有：

　　　　　　　　　　一、本身寫css和js，對日期進行控制；----有點浪費精力和時間；

　　　　　　　　　　二、用easyui插件中的日期插件來實現；

　　　　　　　　　　三、用juqery-ui中的日期控件--datepicker來實現。

今天，咱們注重學習下標題上提到的日期控件，juqery-ui-datepicker控件。對於easyUI有感興趣的，能夠尋找資料繼續研究。

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

datepicker插件使用的具體語法：

　　$("#id").datepicker(optional); 

標註：optional是一個對象，該對象的每一個屬性及含義和方法能夠參考API官方網站：http://jqueryui.com/datepicker/

具體用法：

一、簡單的js代碼：

　　$("#id").datepicker();

id:頁面上日期輸入框的id

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

二、添加配置後的代碼：能夠改變一些默認設置，以下的能夠選擇年份和月份

$("#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）

$(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]));       
   }       
});       
});  

　　

datepicher1.7.2版本沒有提供清除按鈕，這讓人有點遺憾。（好像以前的版本有提供）。沒有清除按鈕是很不方便的，特別是輸入框得到焦點就彈出日期選擇窗口的狀況更是如此，由於這時想要清除輸入框中的日期比較麻煩。在此推薦一位網友提供的加強版datepicher1.7.2。該加強版datepicher1.7.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控制，實現換膚。 

 

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

 http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html