Oblicz różnicę między wprowadzoną datą i godziną?

Question

Mam dwa pola wejściowe do wprowadzenia daty, która jest datepicker jquery. Za pomocą tego mogę wybrać daty. Są to daty zameldowania i wymeldowania.

Podobnie mam dwa pole wyboru, z którego mogę wybrać czas. Są to czas zameldowania i wymeldowania.

Np

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


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

I, do których wyniki: różnica między 01/05/2014 (13:00) i (04/05/2014 18:00) jak 3 dni 5 godz

Fiddle

teraz jestem coraz wynik NAN

Poniżej skrypt używam:

$(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) konwertuje do formatu daty bieżącej.

dostać new Date('mm/dd/yy hh:mm')

---

Date

---

Aktualizacja

Problem

Typo

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

, który powoduje, że date jest nieważny, więc otrzymujesz NaN po odjęciu invalid Date.

Updated Fiddle Demo With your code

Answer 2

Zastosowanie jQuery datepicker, aby wybrać daty

i różnicy próbować ten jeden ..

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

Można użyć datepicker natywną getDate funkcji, aby uzyskać obiekt daty. Następnie korzystając z informacji z this SO answer w odniesieniu do biorąc pod uwagę oszczędności czasu letniego pod rachunkiem możesz użyć czasów dat UTC, aby uzyskać dokładne różnice.

Oprócz dokonania ustawiania czasu datę niezwykle proste, jeśli można zmienić value swoich opcji, należy ustawić je do rzeczywistych wartości godzinnych, podobny do tego:

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

i ten

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

Dzięki temu kod stanie się tak prosty, ponieważ do obliczenia daty i godziny zostaną użyte tylko natywne funkcje obiektu daty, z wyjątkiem sytuacji, gdy podzielone przez 24, aby uzyskać dni od godzin, podobne do:

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 - Get dzień i godzina różnicy, biorąc pod uwagę oszczędności dzienne

---