2011-05-17 111 views
0

我使用以下日期選擇器在Jquery格式化日期顯示在dd/mm/yy格式,我也希望用戶不要選擇未來的日期。只有一件事是在一次工作。datepicker JQuery驗證和格式

<script type="text/javascript" language ="javascript" > 
      $(function() { 
       var date = new Date(); 
       var currentDate = date.getDate(); 
       var currentMonth = date.getMonth(); 
       var currentYear = date.getFullYear(); 
       $(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' }); 
       $(".datepicker").datepicker({ maxDate: new Date(currentYear, currentMonth, currentDate) }); 

      }); 
</script> 

如何使dateformat和禁用未來日期同時工作。我缺少一點點,我不知道如何將這兩個驗證或要求集中到一起。

任何答案請?

謝謝。

回答

1

我對僱傭日期的代碼有類似的要求。以下是我如何做到的:

$('#hireDate').datepicker({ 
    dateFormat: 'dd/mm/yy', 
    maxDate: new Date(currentYear, currentMonth, currentDay) 
}); 
+0

就像一個魅力。奇妙 – 2011-05-17 14:06:41

0

用戶仍然可以手動輸入未來日期,並在日期選擇器周圍輸入未來日期。我們在生產系統上遇到了這個問題。

如果你想額外驗證使用驗證插件的日期,試試這個:

/** 
* Requires Datepicker and Validator 
* 
* Params: 
* 0...dateformat. see datepicker 
* 1...date. Value "0" is "today" 
* 2...(optional). date to display. will be automatically filled if 0 and 1 are set. 
* usage: 
* myfield: { maxDate: ['m/d/yy', 0] } 
*/ 
jQuery.validator.addMethod("maxDate", 
    function(value, element, params) { 
     if (!params[0]) 
      throw 'params missing dateFormat'; 
     if (typeof(params[1]) == 'undefined') 
      throw 'params missing maxDate'; 

     var dateFormat = params[0]; 
     var maxDate = params[1]; 
     if (maxDate == 0) { 
      maxDate = new Date(); 
      maxDate.setHours(0); // make it 00:00:0 
      maxDate.setMinutes(0); 
      maxDate.setSeconds(0); 
      maxDate.setMilliseconds(0); 
     } 
     if (typeof(params[2]) == 'undefined') 
      params[2] = $.datepicker.formatDate(dateFormat, maxDate); 

     try { 
      var valueAsDate = $.datepicker.parseDate(dateFormat, value) 
      return (valueAsDate < maxDate); 
     } catch (x) { 
      return false; 
     } 

    },'Must be greater than {2}.'); 


$("#myform").validate({ 
    rules: { 
     datepicker : { 
      maxDate ['m/d/yy', 0] 
     } 
    } 
}); 

HTML:

<input name="datepicker" class="datepicker" type="text"/>