Comparing input type date with current date

Question

<input type="date" name="bday" id="biday" required>

I have to take the date from input type date field from the user and if the entered date is greater than the current date i have to print some error in the alert box. I Have tried various methods but none of them worked for input type date. I tried to take two variables one which stores the current date and the second which takes the value of date input element `

var startDate = Date(document.getElementByID('biday').value);
    var today = new Date();
    if (startDate > today) {
        alert("The first date is after the second date!");

`.Can someone please help me the procedure to get the task done.

Show us some of your approaches, otherwise we will not be able to help you — Andrzej Smyk, Oct 03 '17 at 10:40
@Daniel Thanks for suggestion but i tried and that's not working any other approach? — Anidh Singh, Oct 03 '17 at 10:48

score 1 · Answer 1 · answered Oct 03 '17 at 11:04

Here is the another way.

HTML

 <input type="date" id="dval" value="" />
 <button onclick="test()">TEsting</button>

JS

 function test() {
     var q = new Date();
     var date = new Date(q.getFullYear(),q.getMonth(),q.getDate());
     var mydate = new Date(document.getElementById('dval').value);

     if(date > mydate) {
        alert("Current Date is Greater THan the User Date");
     } else {
        alert("Current Date is Less than the User Date");
     }
  }

DEMO

Note: type="date" is not supported in Firefox, or Internet Explorer 11 and earlier versions.

If the intention of creating *date* from *q* is just to zero the time, then `q.setHours(0,0,0,0)` will do. But *mydate* will be based on UTC so will be different by the user's timezone offset, resulting in unexpected behaviour for users west of Greenwich. — RobG, Oct 04 '17 at 05:48

score 0 · Answer 2 · answered Oct 03 '17 at 10:57

You've got a little typo at getElementByID it should be getElementById

Also it is possible to compare date strings as the MYSQL Format 'YYYY-MM-DD' so you could actually compare two values directly as a string.

 '2017-12-1' < '2017-12-3'
 // true

If you are operating with another format you can either create a new Date Object and parse it to a TimeStamp like following:

// Receives a date String or Object
// and returns the aprox TimeStamp
function valueifyDate(date){
    if(typeof date == 'object'){
    return date.getTime();
  }else{
    return new Date(date).getTime();
  } 
}

var bday = document.getElementById('birthday');
bday.addEventListener("change", function(e){
  var today = new Date();
  if(valueifyDate(today) < valueifyDate(e.target.value)){
    console.log("younger than today");
  }
})

https://jsfiddle.net/jbnLx3v3/

Andrzej Smyk · Answer 3 · 2017-10-03T13:56:57.260

0

To check whether you have date in startDate it is better to use Date.parse (which is implicitly used in Date constructor) and compare check if it is not NaN. As already mentioned, you need to get numeric value corresponding to the time by using today.getTime(). Then you can compare parsed startDate and today.getTime(). Also it should be getElementById not getElementByID. Please see corrected code below:

function compareDates() {
  var startDate = Date.parse(document.getElementById('biday').value);
  var today = new Date();
  if (!isNaN(startDate) && startDate > today.getTime()) {
    alert("The first date is after the second date!");
  }
}

<input type="date" name="bday" id="biday" required onchange='compareDates()'>

edited Oct 03 '17 at 13:56

answered Oct 03 '17 at 11:09

Andrzej Smyk

1,684
11
21

Using the built-in parser is the worst way to validate a date string if you expect a particular format. Where input type date is supported, the value will be an ISO 8601 formatted string, which has other issues where the built-in parser is used. – RobG Oct 04 '17 at 05:49
Please provide an example or link to one, to explain why `Date.parser` is not the best choice – Andrzej Smyk Oct 04 '17 at 06:02
See [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) Or [*read the specification*](http://ecma-international.org/ecma-262/8.0/#sec-date.parse): parsing of any format other than ISO 8601 extended format is implementation dependent. Even parsing of ISO 8601 formatted dates is specified to be inconsistent with the standard that ECMA-262 supposedly supports. – RobG Oct 04 '17 at 22:37

score -1 · Accepted Answer · answered Oct 03 '17 at 10:50

-1

There are number of errors on your code like getElementByID should be getElementById and you are not taking the value from input and so on. Check below snippet for reference.

function checkDate() {

  var startDate = new Date(document.getElementById('biday').value);
  var today = new Date();
  if (startDate.getTime() > today.getTime()) {
    alert("The first date is after the second date!");
  }  
}

<input type="date" name="bday" id="biday" required>
<input type="submit" value="check" onclick="checkDate()">

answered Oct 03 '17 at 10:50

RaJesh RiJo

4,302
4
25
46

Thanks, didn't realized value was missing. Thanks it worked. – Anidh Singh Oct 03 '17 at 10:55
The value returned from a Date input will be formatted as YYYY-MM-DD. That will be parsed by the built-in parser as UTC, which is likely not what the OP expects. For users west of Greenwich, `startDate.getTime() > today.getTime()` will frequently be true even where *startDate* is "today". – RobG Oct 04 '17 at 05:43

Comparing input type date with current date

4 Answers4