Displaying time difference with javascript/jquery

问题

I'm using a datepicker to choose dates, I want to calculate difference between dates choosen & then alert the difference.I'm not able see the code work

HTML datepicker

<input type="date" size="8" name="advDurFrom" />
<input type="date" size="8" name="advDurTo"/>

Javascript

   $('input[name=advDurFrom]').click(function() {
    var x=$('input[name=advDurFrom]').val();
    var date1 = new Date(x);
    });
        $('input[name=advDurTo]').click(function() {
        var y=$('input[name=advDurTo]').val();
    var date2 = new Date(y);
    });
    $('input[name=advDurTo]').focusout(function() {
    var diffDays = date2.getTime() - date1.getTime(); 
    alert(diffDays);
    });

回答1:

Html:

<input type="date" name="startdate">
<input type="date" name="enddate">
<button id="calculate">Calculate</button>
<h2 id="result"></h2>

Script:

var startdateInput = document.querySelector('input[name="startdate"]'),
    enddateInput = document.querySelector('input[name="enddate"]'),
    calculateButton = document.getElementById('calculate'),
    resultElement = document.getElementById('result');

calculateButton.addEventListener('click', function(e) {

    if( startdateInput.value && enddateInput.value ) {
        result.textContent = new Date(enddateInput.value) - new Date(startdateInput.value);
    }    
});

Or see the JSFiddle http://jsfiddle.net/zJTfM/

The result is the number of milliseconds between the start and end date.

回答2:

$('input[name=advDurFrom]').live('change', function(e) {
    var x=$(this).datepicker( "getDate" );
    date1 = x.getTime();
});
$('input[name=advDurTo]').live('change', function(e) {
    var y=$(this).datepicker( "getDate" );
    date2 = y.getTime();
});
$('input[name=advDurTo]').live('blur', function(e) {
    if(date2 && date1){
        var diffDays = date2 - date1 ; 
        alert(diffDays);
    } else {
        alert("date is not selected.")
    } 
});

回答3:

In my project I use this function to calculate difference day between 2 date,I modify some for you. see demo in jsfiddle

HTML:

<input type="text" size="8" name="advDurFrom" />
<input type="text" size="8" name="advDurTo"/>
difference days: <span class="diff"><span>

JS:

function CalendarDays(startDate, endDate) {
    if (endDate < startDate)
        return 0;

    // Calculate days between dates
    var millisecondsPerDay = 86400 * 1000; // Day in milliseconds
    startDate.setHours(0, 0, 0, 1); // Start just after midnight
    endDate.setHours(23, 59, 59, 999); // End just before midnight
    var diff = endDate - startDate; // Milliseconds between datetime objects
    var days = Math.round(diff / millisecondsPerDay);

    return days;
}
function common_getDateFromUI(str) {
    var arr = str.split("/");
    var returnDate = new Date(arr[2], arr[1] - 1, arr[0], 0, 0, 0, 0);
    return returnDate;
}
$().ready(function(){
    $('input[name="advDurFrom"],input[name="advDurTo"]').datepicker( {
        showOn : "both",
        dateFormat : "dd/mm/yy",
        changeMonth : true,
        changeYear : true,
        buttonImageOnly : true,
        onSelect : function(dateText, inst) {    
                var day1 =  common_getDateFromUI($('input[name="advDurFrom"]').val());      
                var day2 =  common_getDateFromUI($('input[name="advDurTo"]').val());    
                $(".diff").html(CalendarDays(day1,day2));
        }
    });
});

回答4:

I think you need to declare the variable globally. Try this code. This is working perfectly for me.

var date1 = "";
var date2 = "";

$('#advDurFrom').click(function () {
    var x = $(this).val();
    date1 = new Date(x);
});
$('#advDurTo').click(function () {
    var y = $(this).val();
    date2 = new Date(y);
});
$('#advDurTo').focusout(function () {
    var diffDays = date2.getTime() - date1.getTime();
    alert(diffDays);
});

And Change the HTML to

 <input type="date" size="8" id="advDurFrom" />
 <input type="date" size="8" id="advDurTo" />

回答5:

getTime returns millisecond, you just need to convert into the correct unit. Here an example with days difference. Also use blur event not click or you will end up assigning the value before the user actually inputs it

var isOK = false;
var isOK2 = false;
$('input[name=advDurFrom]').blur(function () {
    var x = $('input[name=advDurFrom]').val();
    try {
        date1 = new Date(x);
        isOK = !isNaN(date1);
    } catch (e) {
        isOK = false;
    }
    printDiff();
});
$('input[name=advDurTo]').blur(function () {
    var y = $('input[name=advDurTo]').val();
    try {
        date2 = new Date(y);
        isOK2 = !isNaN(date2);
    } catch (e) {
        isOK2 = false;
    }
    printDiff();
});

function printDiff(){
    if (isOK && isOK2) {
        var one_day = 1000 * 60 * 60 * 24;
        var diff = Math.ceil((date2.getTime() - date1.getTime()) / (one_day));
        console.log(diff + ' days');
    }
}

Fiddle here

来源：https://stackoverflow.com/questions/16829299/displaying-time-difference-with-javascript-jquery