帶日期範圍的jQuery UI日期選擇器，從當前日期開始

Question

我正在爲酒店事件創建功能，並使用jQuery UI日期選擇器輸入兩個字段，即 事件開始日期和事件結束日期。

所以，因爲看起來我想將當前日期的開始輸入，這意味着事件開始日期不能設置爲過去的日期。那麼你能告訴我它是如何完成編碼的。

for example datepicker shown in this demo

Answer 1

$('#input').datepicker({ minDate : new Date() });將做到這一點。

看看一個例子，道歉，我不能包含CSS文件

http://jsfiddle.net/xVAfP/

Answer 2

在腳本的Jquery：

var dates = $("#date_init, #date_final").datepicker({ 
    onSelect: function(selectedDate) { 
     var option = this.id == "date_init" ? "maxDate" : "minDate", 
     instance = $(this).data("datepicker"), 
     date = $.datepicker.parseDate(
      instance.settings.dateFormat || 
      $.datepicker._defaults.dateFormat, 
      selectedDate, instance.settings d 
     ); 
     dates.not(this).datepicker("option", option, date); 
    } 

}); 

輸入：

與PHP：

<input type="text" maxlength="10" name="date_final" id="date_final" value="<? echo date('Y/m/d'); ?>" > 

或者您可以使用javascript來設置輸入日期。

再見。 www.estevaosoberano.com

Answer 3

<input type="text" id="tbStartDate" value="" disabled="disabled" /> 
<input type="text" id="tbEndDate" value="" disabled="disabled" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tbStartDate").datepicker({    
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onSelect: function (dateText, inst) { 
       var $endDate = $('#tbStartDate').datepicker('getDate'); 
       $endDate.setDate($endDate.getDate() + 1); 
       $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
      }, 
      onClose: function (dateText, inst) { 
       //$("#StartDate").val($("#tbStartDate").val()); 
      } 
     }); 

     $("#tbEndDate").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onClose: function (dateText, inst) { 
       //$("#EndDate").val($("#tbEndDate").val()); 
      } 
     }); 

      var $endDate = $('#tbStartDate').datepicker('getDate'); 
      $endDate.setDate($endDate.getDate() + 1); 
      $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate); 
    }); 
</script>