jQuery UI Datepicker Проблема с прибытием - даты отправления

Ага .. я в тупике ....

У меня есть модуль бронирования, в котором запущен пользовательский интерфейс средства выбора даты jQuery. У меня есть поле даты прибытия и поле даты отъезда, каждое с объектом выбора даты, инициированным на обоих.

Я хочу, чтобы дата прибытия по умолчанию была сегодняшней датой, которую я достиг, выполнив следующие действия:

   <script type="text/javascript">
      $(document).ready(function(){

          $(".arrive").datepicker();
          $(".depart").datepicker();

          $(".arrive").datepicker('setDate', new Date());

      });
   </script>

Это прекрасно работает, однако, когда пользователь выбирает дату прибытия, я хочу, чтобы дата отъезда по умолчанию была установлена ​​на один день после даты прибытия, выбранной пользователем. Я попытался использовать события onSelect для объекта выбора даты и попытался извлечь значение из поля прибытия и добавить день, но безрезультатно. Я видел эту функциональность раньше, я не думаю, что это очень сложно, я просто зашел в тупик на этом. Любые идеи? Мой html для текстовых полей выглядит следующим образом:

<ul>
  <li>  
    <label>Arriving</label>     
    <span class="dateinput">                                                   
        <input class="arrive" type="text" value="" name="startDate" />                                  
        <img id="arrive"  src="images/calendar_icon.png"  />
        <div class="clear"></div>
    </span>
  </li>

  <li>  
    <label>Departing</label>        
    <span class="dateinput">                                
        <input class="depart" name="endDate" value="" type="text"  />               
        <img src="images/calendar_icon.png" />
        <div class="clear"></div>
    </span> 
  </li>
</ul>

Большое спасибо всем, кто может помочь мне с этой проблемой.


jquery daterangepicker jquery-ui jquery-ui-datepicker
person dcav    schedule 19.09.2011    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Взяв за основу документацию:

<script type="text/javascript">
  $(document).ready(function(){

      $(".arrive").datepicker({
          onSelect: function( selectedDate ) {
            // Parse the selected date
            var instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            // Add one day
            date.setDate(date.getDate()+1);

            // Set the new date
            $(".depart").datepicker('setDate', date);               
        }
      });
      $(".depart").datepicker();

      $(".arrive").datepicker('setDate', new Date());
  });
</script>
person Laurent le Beau-Martin    schedule 19.09.2011
comment
Я рада, можешь принять мой пост в качестве ответа? Это даст мне очки репутации, и люди будут охотнее отвечать на ваши вопросы, если вы примете ответы. - person Laurent le Beau-Martin; 20.09.2011

arrow_upward
0
arrow_downward

вы смотрели документацию?

http://jqueryui.com/demos/datepicker/#date-range

-> просмотреть исходный код

у него даже есть код onSelect, который вы могли бы частично использовать для своей конкретной проблемы

person definitely undefinable    schedule 19.09.2011

arrow_upward
0
arrow_downward

после некоторых проб и ошибок я обнаружил, что это сработало для меня, чтобы установить минимальную дату отъезда и максимальную дату прибытия (в случае, если отправление выбрано до прибытия)

$("#arrival").datepicker({
  //set other options here
  minDate: 0,  //sets min date today
  onClose: function() {
    let arriveDate = $(this).datepicker("getDate");
    if(arriveDate){
      arriveDate.setDate(arriveDate.getDate() + 1);
      $("#depart").datepicker("option", "minDate", arriveDate); //sets min departure date to arrival date + 1
    }else $("#depart").datepicker("option", "minDate", 1); //reset to default min departure date (in case arrival date was earlier set and later removed)
  }
})
$("#depart").datepicker({
  //set other options here
  minDate: 1,  //sets min date today + 1
  onClose: function() {
    let departDate = $(this).datepicker("getDate");
    if(departDate){
      departDate.setDate(departDate.getDate() - 1);
      $("#arrival").datepicker("option", "maxDate", departDate); //sets max arrival date to departure date - 1
    }else $("#arrival").datepicker("option", "maxDate", ''); //reset to default max arrival date (in case departure date was earlier set and later removed)

  }
})
person LaZza    schedule 25.02.2020