Получение разницы от диапазона значений в Jquery UI Datepicker - PullRequest
Новая
       44

Получение разницы от диапазона значений в Jquery UI Datepicker

0 голосов
/ 02 ноября 2019

Я работаю над полями ввода даты, в которых есть jQuery UI datepicker. Это дата отъезда и дата возвращения. После того, как пользователь выберет дату отъезда и дату возвращения, мне нужно найти разницу между датой, которую он / она покинул, и датой, которую он / она возвратил, и мгновенно заполнить ее в другом поле ввода.

Код разметки 

<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required> 

<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required> 

<!--Output-->
<p>Your trip is<br/> <div>41 days</div></p>

Логика JavaScript 

  <script>
          $(function() {
      $("#departureDate").datepicker({
        changeMonth: true,
        changeYear: true,
        minDate: '+1', 
        dateFormat: 'dd-mm-yy',
        onSelect: function(selected) {
          $("#returnDate").datepicker("option","minDate", selected);
                //Remove required attribute
                $(this).removeAttr('required');
              }
          });

      $("#returnDate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
            onSelect: function(selected) {
              $("#departureDate").datepicker("option","maxDate", selected);
              //Remove required attribute
              $(this).removeAttr('required');
            }
          });
    });

    </script>

Логика для проверки разницы 

$(function() {
    let $fromDate = $('#departureDate'),
        $toDate = $('#returnDate');

    $fromDate.datepicker().on('change', function(){
        $toDate.datepicker('option', 'minDate', $(this).val());
    });

    $toDate.datepicker().on('change', function(){
        $fromDate.datepicker('option', 'maxDate', $(this).val());
    });;
});

1 Ответ

1 голос
/ 02 ноября 2019

Попробуйте это 

$(function() {
  $("#departureDate").datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: '+1',
    dateFormat: 'dd-mm-yy',
    onSelect: function(selected) {
      $("#returnDate").datepicker("option", "minDate", selected);
      //Remove required attribute
      $(this).removeAttr('required');
      calcDays();
    }
  });

  $("#returnDate").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd-mm-yy',
    onSelect: function(selected) {
      $("#departureDate").datepicker("option", "maxDate", selected);
      //Remove required attribute
      $(this).removeAttr('required');
      calcDays();
    }
  });
});

function calcDays() {
  let from = $('#departureDate').datepicker('getDate');
  let to = $('#returnDate').datepicker('getDate');

  if (!from || !to)
    return;

  let diffTime = Math.abs(to - from);
  let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

  $('p').show();
  $('p span').text(diffDays);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' />


<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required>

<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required>

<!--Output-->
<p hidden>Your trip is
  <span></span> days
</p>
...