jquery datepicker + date diff calculation

Question

this is my code:

$(function() {
    $( \"#arr_date\" ).datepicker({ dateFormat: \'dd-mm-yy\' });
    $( \"#dep_date\" ).datepicker({ dateFormat: \'dd-mm-yy\         


        

Answer 1

You don't want to use .val() here, that will give you a string and subtracting strings from each other isn't terribly useful. The datepicker has a method, getDate, that gives you a Date object so you could use that:

var start = $('#arr_date').datepicker('getDate');
var end   = $('#dep_date').datepicker('getDate');
var days   = (end - start)/1000/60/60/24;

Demo: http://jsfiddle.net/ambiguous/TCXcX/

Also, this code:

$(function() {
    var start = $('#arr_date').val();
    var end = $('#dep_date').val();
    var diff = new Date(end - start);
    var days = diff/1000/60/60/24;
    $('#num_nights').val(days);  
});

will run when the DOM is ready but you don't want it to run until the dates have been selected. You'd need to bind your (corrected) calculation code to a button or watch the onSelect events:

function showDays() {
    var start = $('#arr_date').datepicker('getDate');
    var end   = $('#dep_date').datepicker('getDate');
    if(!start || !end)
        return;
    var days = (end - start)/1000/60/60/24;
    $('#num_nights').val(days);  
}

$( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy', onSelect: showDays });
$( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy', onSelect: showDays });

And another demo: http://jsfiddle.net/ambiguous/5BbGS/