how to alert if the input date is greater than defined date in js

Question

I am having an input date field in my form. In my date field i need to alert an error if the input date is greater than any date i define before here is what i code :

$(document).ready(function () {
    var date = new Date(2016,2,1); //the defined date is 1 March 2016
    var day = date.getDate();
    var month = date.getMonth();
    month = month + 1;

    if(day < 10){
        day = '0' + day;
    }

    if(month < 10){
        month='0'+month;
    }

    someday = day + '/' + month + '/' + date.getFullYear();

    $("#q1 input").blur(function(){   //#q1 is the ID for the input field.
        if($('#q1 input').val() > someday){
            alert('the input is bigger than the defined');
        }else{  
            alert('the defined is bigger than the input ');
        }
    });
});

Answer 1

To compare Dates is very straight forward. Most operators coerce the operands to number, and Dates return their time value so to see if today is before or after say 1 March 2016, create two Dates and compare them:

 var epoch = new Date(2016,2,1); // Create date for 2016-03-01T00:00:00 var now = new Date(); // Create a date for the current instant now.setHours(0,0,0,0); // Set time to 00:00:00.000 if (now < epoch) { alert('Before 1 March, 2016'); } else { alert('On or after 1 March, 2016'); } 

Or a bit more compact:

alert((now < epoch? 'Before':'On or after') + ' 1 March, 2016');

Answer 2

You might want to compare the values as in the date form, not the way you did. Convert the input value into the form of date and compare it with the variable 'date'.

Answer 3

Compare the input date with the desired date that you defined. For example:

var d1 = new Date();
var d2 = new Date(d1);
var same = d1.getTime() === d2.getTime();
var notSame = d1.getTime() !== d2.getTime();

If you find it tricky, then there is an awesome js library called moment.js . It is very useful when playing with dates.

Answer 4

$(document).ready(function () {
    var date=new Date(2016,2,1); //the defined date is 1 March 2016
    var fixedDate = returnDate(date);// convert date in dd/mm/yyyy format

    //#q1 input will search a child input inside an #q1 dom element, which probably not the case
    // input#q1 will refer to input with id #q1
   // You can directly query the input since it has id #q1 so #q1 input is not correct


$("#q1").blur(function(){   //#q1 is the ID for the input field.
 var d2 = new Date($('#q1').val());
 var inputDate = returnDate(d2); // convert input date in dd/mm/yyyy format

 if(inputDate > fixedDate){ // compare two dates
  console.log('the input is bigger than the defined');
  }else{    
  console.log('the defined is bigger than the input ');
}
});
});

// Write a general function to convert date in dd/mm/yyyy format
function returnDate(date){
   var day=date.getDate();
    var month=date.getMonth();
    month=month+1;
    if(day<10){
    day='0'+day;
 }
   if(month<10){
   month='0'+month;
 }
 var someday=day+ '/' + month + '/' + date.getFullYear();
  return someday;
}

JSFIDDLE

EDIT 1

Use ternary operator instead of if-else

inputDate > fixedDate? (console.log("the input is bigger than the defined")):(console.log("the defined is bigger than the input"))

with ternary operator