从 Jquery U.I Datepicker 中的 dte 范围获取差异

Question

我正在处理其中包含 jQuery UI datepicker 的日期输入字段。它们是出发日期和 return 日期。用户选择出发日期和 return 日期后，我需要找出出发日期 he/she 和出发日期 he/she return 之间的差异并填充到另一个输入字段中即刻。

标记代码

<!--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());
    });;
});

Answer 1

试试这个

$(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>

从 Jquery U.I Datepicker 中的 dte 范围获取差异

Getting difference from range of dtes in Jquery U.I Datepicker

javascript

jquery

datepicker

jquery-ui-datepicker