jQuery DatePicker - 2 поля

Question

В настоящее время я работаю с jQuery и использую datepicker.

У меня есть два поля ввода: Дата начала и Дата окончания. Когда каждый щелкнут, выводится датапикер.

Для поля «Дата окончания» я хотел бы, чтобы выбор даты jQuery выделил в тот же день. Например, если пользователь выбирает 8/12/09 в качестве даты начала, для конечной даты они не могут выбрать что-либо ДО 8/12/09.

Вот что я в настоящее время:

$("#datepicker").datepicker({minDate: +5, maxDate: '+1M +10D', changeMonth: true}); 
var startDate = $("#datepicker").val(); 
var the_date = new Date(startDate); 
$("#datepicker2").datepicker({ minDate: the_date }); 

И Unforunately, это не работает.

Я обнаружил, что если я «жесткий код» значения в, как:

$("#datepicker2").datepicker({ minDate: new Date("08/12/2009") }); 

он будет работать нормально. Любые идеи о том, как передать «дату начала» на «дату окончания»?

Спасибо!

Answer 1

это косяк работа

вам нужна функция обратного вызова от выбора даты для «собирания» события. перед этим событием ваш startDate будет пустым.

попробовать это:

$("#datepicker").datepicker({ 
    minDate: +5, 
    maxDate: '+1M +10D', 
    changeMonth: true, 
    onSelect: function(dateText, inst){ 
       var the_date = new Date(dateText); 
       $("#datepicker2").datepicker('option', 'minDate', the_date); 
    } 
}); 
$("#datepicker2").datepicker(); // add options if you want 

Answer 2

Дата начала Дата окончания http://rowsandcolumns.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html

Answer 3

дата время культура будет отличаться отличаться пользователя. минимум jquery ui не работает для этого выше кода. и первоначально, если я выбираю дату окончания, тогда минимальная дата не будет установлена ​​для даты окончания.

<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({ 
      //minDate: +5, 
      //maxDate: '+1M +10D', 
      //changeMonth: true, 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onSelect: function (dateText, inst) { 
       $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate'))); 
      }, 
      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()); 
      } 
     }); 

     $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate'))); 
    }); 
</script>