計算輸入的日期和時間之間的差異？

Question

我有兩個輸入字段輸入日期，這是一個jQuery的日期選擇器。使用我可以選擇日期。他們是檢查和檢查日期。

同樣，我有兩個選擇框，從中我可以選擇時間。他們是檢查和檢查時間。

如：

Check in date: 01/05/2014 
Check in time: 13:00 


Check out date: 04/05/2014 
Check out time: 18:00 

我想要的結果：（2014年1月5日13:00）和（2014年4月5日18:00） 像3天5個小時之間的區別

Fiddle

現在我得到的結果NAN

以下是我使用的腳本：

$(document).ready(function(){ 
    $("#diff").focus(function(){ 
     var start = new Date($('#din').val()); 
     var end = new Date($('#dou').val()); 
     var diff = new Date(end - start); 
     var days = Math.floor(diff/1000/60/60/24); 
     var hours = Math.floor((diff % (1000 * 60 * 60 * 24))/1000/60/60); 
     $("#diff").val(days+' Day(s) '+hours+' Hour(s)'); 
    }); 
}); 

Answer 1

Fiddle Demo

$(document).ready(function() { 
    function ConvertDateFormat(d, t) { 
     var dt = d.val().split('/'); //split date 
     return dt[1] + '/' + dt[0] + '/' + dt[2] + ' ' + t.val(); //convert date to mm/dd/yy hh:mm format for date creation. 
    } 
    $("#diff").focus(function() { 
     var start = new Date(ConvertDateFormat($('#din'), $('#tin'))); 
     var end = new Date(ConvertDateFormat($('#dout'), $('#tout'))); 
     console.log(start, end); 
     var diff = new Date(end - start); 
     var days = Math.floor(diff/1000/60/60/24); 
     var hours = Math.floor((diff % (1000 * 60 * 60 * 24))/1000/60/60); 
     $("#diff").val(days + ' Day(s) ' + hours + ' Hour(s)'); 
    }); 
}); 

---

ConvertDateFormat(d,t)日期轉換爲當前格式。

得到new Date('mm/dd/yy hh:mm')

---

Date

---

更新

問題

錯字

var end = new Date($('#dout').val()); 
//      ^missing t in id it's dout not dou 

這使得date無效，所以當你減去invalid Date時，你得到了NaN。

Updated Fiddle Demo With your code

Answer 2

使用jQuery日期選擇器來接日期

和差異試試這個..

HTML

<input type="text" id="date1"> 
<input type="text" id="date2"> 
<input type="text" id="calculated"> 


$(document).ready(function() { 

var select=function(dateStr) { 
     var d1 = $('#date1').datepicker('getDate'); 
     var d2 = $('#date2').datepicker('getDate'); 
     var diff = 0; 
     if (d1 && d2) { 
      diff = Math.floor((d2.getTime() - d1.getTime())/86400000); // ms per day 
     } 
     $('#calculated').val(diff); 
} 

$("#date1").datepicker({ 
    minDate: new Date(2012, 7 - 1, 8), 
    maxDate: new Date(2012, 7 - 1, 28), 
    onSelect: select 
}); 
$('#date2').datepicker({onSelect: select}); 
}); 

Answer 3

您可以使用日期選擇本地getDate特性得到日期對象。然後使用this SO answer中有關的信息將日光節約納入帳戶，您可以使用UTC日期時間來獲取確切的差異。

除了使設置日期時間非常簡單，如果你可以改變你的選擇的value，它們設置爲實際的小時值，與此類似：

<select id="tin" name="tin"> 
    <option value="13">13:00</option> 
    <option value="19">19:00</option> 
</select> 

這

<select id="tout" name="tout"> 
    <option value="12">12:00</option> 
    <option value="18">18:00</option> 
</select> 

將使用唯一的本地日期的對象特徵來計算您的日期和時間，由24 dividng時除外擺脫小時的日子使代碼很容易，與此類似：

var _MS_PER_HOUR = 1000 * 60 * 60; // 3600000ms per hour 
var outputTextWithSign = '{0}{1} Days(s) {2}{3} Hours(s)'; // included sign 
var outputTextWithoutSign = '{0} Days(s) {1} Hours(s)'; // no sign 

$(function() { 
    $("#din, #dout").datepicker({ 
     minDate: 0, 
     dateFormat: 'dd/mm/yy' 
    }); 
}); 

$(document).ready(function() { 
    $("#diff").focus(function() { 
     var startDate = $('#din').datepicker('getDate'); 
     var endDate = $('#dout').datepicker('getDate'); 

     // use native set hour to set the hours, assuming val is exact hours 
     // otherwise derive exact hour from your values 
     startDate.setHours($('#tin').val()); 
     endDate.setHours($('#tout').val()); 

     // convert date and time to UTC to take daylight savings into account 
     var utc1 = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), startDate.getHours(), startDate.getMinutes(), startDate.getSeconds()); 
     var utc2 = Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), endDate.getHours(), endDate.getMinutes(), endDate.getSeconds()); 

     // get utc difference by always deducting less from more 
     // that way you always get accurate difference even if in reverse! 
     var utcDiff = utc1 > utc2 ? utc1 - utc2 : utc2 - utc1; 

     // get total difference in hours 
     var msDiff = Math.floor(utcDiff/_MS_PER_HOUR); 

     // get days from total hours 
     var dayDiff = Math.floor(msDiff/24); 

     // get left over hours after deducting full days 
     var hourDiff = Math.floor((msDiff - (24 * dayDiff))); 

     // 
     // write out results 
     // 

     // if you really need to show - sign and not just the difference... 
     var sign = utc1 > utc2 ? '-' : ''; 

     // format output text - with (-)sign if required 
     var txtWithSign = outputTextWithSign.format(dayDiff ? sign : '', dayDiff, hourDiff ? sign : '', hourDiff); 

     // simple format without sign 
     var txtNoSign = outputTextWithoutSign.format(dayDiff, hourDiff); 

     // assign result - switch with/without sign result as needed 
     $("#diff").val(txtWithSign); 
     //$("#diff").val(txtNoSign); 
    }); 
}); 

// Helper for easy string formatting. 
String.prototype.format = function() { 
    //var s = arguments[0]; 
    var s = this; 

    for (var i = 0; i < arguments.length; i++) { 
     var reg = new RegExp("\\{" + i + "\\}", "gm"); 
     s = s.replace(reg, arguments[i]); 
    } 

    return s; 
} 

---

DEMO - 獲取日和小時的時差，服用夏令考慮

---