Date Validation : validating Return date is after departure date using datepicker( )

Question

I am trying to validate that the return date is after departure, I cant think of how to write the function. I was thinking one approach would be to strip the ( / ) forward slashes from the dates picked from the datepicker ( ) so they are whole integers and store them into new variables then use a if/else statement to alert if the return date < departure date.

Anyone know if this would be the right way to go?? if so how do i go taking the input from the datepicker() and strip the slashes??

$(document).ready(function(){

    var destinations = [];
    destinations[0]='italy';
    destinations[1]='france';
    destinations[2]='california';
    destinations[3]='miami';
    destinations[4]='Denver';
    destinations[5]='chicago';

    var departing = $('#departing').datepicker();
    var returning = $('#returning').datepicker();
    $('#destination').autocomplete({source:destinations});

    $('input').focus(function(){
        $(this).css('outline-color', 'skyblue');

    }); // end focus function
}); // end document Ready

Check this http://stackoverflow.com/questions/492994/compare-dates-with-javascript . try getting dates from datepicker — malkam, May 26 '14 at 19:13

score 1 · Accepted Answer · answered May 26 '14 at 19:38

You don't need to parse the date yourself. Just call $(selector).datepicker('getDate') and you will get a date object. If you have both dates you can simply compare them to each other.

function validate() {
    var departing = $('#departing').datepicker('getDate');
    var returning = $('#returning').datepicker('getDate');

    //do wathever you want if returning is before departing
    alert(departing > returning);
}

You can also restrict the pickable dates like this:

$('#departing').on('change', function() {
    $('#returning').datepicker("option", "minDate", $('#departing').datepicker('getDate'));
});
$('#returning').on('change', function() {
    $('#departing').datepicker("option", "maxDate", $('#returning').datepicker('getDate'));
});

Runcorn · Answer 2 · 2014-05-26T19:44:31.707

You could simply achieve this using Date Picker functionality. Below lines of code will give you the Date object of the respective Date Picker ...

  var departing= $("#departing").datepicker("getDate");
  var returning= $("#returning").datepicker("getDate");

And for comparison you could simply use

   if (departing < returning) {

to find out return date is after departure .

Or you can look into the Date Picker Date parser method for getting Date Object directly ,

   var departing= $.datepicker.parseDate("date-picker-format",$("#returning").val());
   var returning= $.datepicker.parseDate("date-picker-format",$("#returning").val());
   //e.g date-picker-format = dd-mm-yy

Date Validation : validating Return date is after departure date using datepicker( )

2 Answers2