JQuery DateTimePicker UI 获取两个日期时间选择器之间的总天数

Question

我正在尝试从我得到的两个自定义 DateTimePickers 中获取总天数。

我试过这个功能：

 function dateDifference() {
if($("#fradato").val()!='' && $("#fradato").val()!='') {
var diff = ($("#fradato").datepicker("getDate") - $("#tildato").datepicker("getDate")) / 1000 / 60 / 60 / 24;
$("#antalldager").val(diff)

我遇到的问题是无论我尝试调用此函数的什么地方，DateTimePicker 都会停止工作。那么where/how我应该调用这个函数还是有更好的方法呢？

我想在此文本框内显示总天数：

 <div class="form-group">
   <label class="control-label col-sm-1 col-sm-offset-3"     for="antalldager">Antall dager:</label>
 <div class="col-sm-2">
<input type="text" class="form-control" id="antalldager" disabled>

这是我的 html:

 <script>valgavdato() </script>
<div  id="visdager" style="display: none;">
<label class="control-label col-sm-2 col-sm-offset-3" for="fradato">Book fra:</label>
  <div class="container">
      <div class="row">
          <div class='col-sm-2'>
              <div class="form-group">
                  <div class='input-group date'>
                      <input type="text" id="fradato" class="form-control"/>
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"  ></span>
                      </span>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div id="vistildato" style="display: none;">
    <label class="control-label col-sm-2 col-sm-offset-3" for="tildato">Book til:</label>
  <div class="container">
      <div class="row">
          <div class='col-sm-2'>
              <div class="form-group">
                  <div class='input-group date'>
                      <input type="text" id="tildato" class="form-control" />
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                      </span>
                  </div>
              </div>
          </div>
      </div>
  </div>

JS:

   $( function valgavdato() {
var dateFormat = "mm/dd/yy",
    to_MaxDate = 13;    // From date + this = to maxDate

    from = $( "#fradato" )
.datepicker({
    minDate: '0+',
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1

})
.on( "change", function() {
    var PickedDate = getDate( this );
    // See that date is in UTC format.
    console.log( "From DatePicker: "+JSON.stringify(PickedDate) );

    // Process the picked date.
    var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date.
    var tempMonth = PickedDate.getMonth() + 1;   // Because months are zero based.
    var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based
    console.log( "Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it.");

    // Create a date object in a UTC format.
  var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 0, 0, 0));
    console.log(  "New max date: : "+ JSON.stringify(newMaxDate) );

    // Set the minDate ans maxDate options.
    to.datepicker( "option", {"minDate": PickedDate, "maxDate": newMaxDate});
}),
    to = $( "#tildato" ).datepicker({
        maxDate: '14+',
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
    })
.on( "change", function() {
    from.datepicker( "option", "maxDate", getDate( this ) );
});

function getDate( element ) {
    var date;
    try {
        date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
        date = null;
    }
    return date;
}
} );

function dateDifference() {
if($("#fradato").val()!='' && $("#fradato").val()!='') {
    var diff = ($("#fradato").datepicker("getDate") - $("#tildato").datepicker("getDate")) / 1000 / 60 / 60 / 24;
    $("#antalldager").val(diff)
}
}

Answer 1

我认为@JanisP 的建议很好。您还可以创建一个轻量级函数，例如：

function dateDifference(start, end) {
  // Assume Start and End string format: dd/mm/yyyy
  var d1 = new Date(start);
  var d2 = new Date(end);
  // d2 - d1 gives result in milliseconds
  // calculate number of days by Math.abs((d2-d1)/86400000, as 24*3600*1000 = 86400000
  return Math.abs((d2-d1)/86400000)
}

在此处找到：jQuery UI Datepicker - Number of Days Between Dates

更新

来自jQuery UI Datepicker Select a Date Range example, I created this working example: https://jsfiddle.net/Twisty/r8wx6afk/

只有在 change 事件期间两个字段都有日期时才计算天数。

JQuery DateTimePicker UI 获取两个日期时间选择器之间的总天数

JQuery DateTimePicker UI getting total days between two datetimepickers

jquery

jquery-ui

datetimepicker