从jQuery U.I Datepicker中的dtes范围中获取差异

Question

我正在处理其中有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());
    });;
});

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>

Answer 2

首先，您不需要使用onChange，可以在onSelect功能上有所不同。然后通过getDate功能获得所选日期，最后通过Math.abs((d.getTime() - r.getTime()) / 86400000)获得差额。

function diff() {
  var d = $('#departureDate').datepicker('getDate');
  var r = $('#returnDate').datepicker('getDate');
  if (d && r) {
    var diff = Math.abs((d.getTime() - r.getTime()) / 86400000);
    $('#result').text(diff);
  }
}

$(function() {
  let departureDate = $("#departureDate");
  returnDate = $("#returnDate");

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

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

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" integrity="sha256-NZbx4a8IBv5C3T7rGvR2iE1Ft9fAb1w/9pInCG9b1zo=" crossorigin="anonymous" />

<!--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><span id="result"></span> days</div>
</p>