Comparing dates in JavaScript

Question

I'm quite new to JavaScript and I experiment a lot to get used to it. I trying to write JavaScript function that determinates if the date is from the past or future. It used datepicker form and somehow the if statement isn't working properly because whatever date I select it displays "Date from the future".

function selectDate()
{
    var d = new Date();
    var day = d.getDate();
    var month = (d.getMonth() +1);
    var year = d.getFullYear();
    var x=document.getElementById("dateSelection");

if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

if (d > x)
{
    document.write("Date from the past" + "<br>");
    document.write("Today is " +day+ "/" +month+ "/" +year+ "");
}
else (d < x)
{
    document.write("Date from the future" + "<br>");
    document.write("Today is " +day+ "/" +month+ "/" +year+ "");
}

JS date objects can be compared directly. `if (date_object_from_picker < date_object_for_today) { it's in the past }` But you're not comparing dates, you're comparing a date object with a DOM object. You need to take the VALUE of that dom object, convert it to a date object, THEN compare — Marc B, Jan 06 '14 at 22:12
can you give a example? quite novice to this. thanks in advance — Raikonne, Jan 06 '14 at 22:15

score 1 · Answer 1 · answered Jan 06 '14 at 22:26

You're comparing a string x against date object d, this can't be done.

For comparing dates, it's better to compare Date objects, you could do:

function selectDate()
{
    var d = new Date();
    var day = d.getDate();
    var month = (d.getMonth() +1);
    var year = d.getFullYear();
    var x = document.getElementById("dateSelection"); //This is a STRING, not a Date

    var dateParts = x.split("/");   //Will split in 3 parts: day, month and year
    var xday = dateParts[0];
    var xmonth = dateParts[1];
    var xyear = dateParts[2];

    //Now create date object of the selected one
    var xd = new Date(xyear, parseInt(xmonth, 10) -1, xday);


    if (d > xd)  //Now we compare 2 date objects
    {
      document.write("Date from the past" + "<br>");
      document.write("Today is " +day+ "/" +month+ "/" +year+ "");
    }
    else (d < xd)
    { 
      document.write("Date from the future" + "<br>");
      document.write("Today is " +day+ "/" +month+ "/" +year+ "");
    }
}

Hope this helps. Cheers

talemyn · Accepted Answer · 2014-01-06T22:47:23.537

The most straightforward way to do this is simple Date object comparison using the standard < and > operators. There are a few tricks, though . . .

First, initialize your "current date":

var d = new Date();

The the problem is, that actually is the current date/time, not just the current date, so any date that is entered in that equals today's date will throw a false "less than" (unless you check at exactly midnight ;) ). So, you need to "zero out" the time values in the d value:

d.setHours(0, 0, 0, 0);

Now, you create a Date object from the user input:

var x = new Date(document.getElementById("dateSelection"));

Because the input is a date string, (1) the Date constructor knows how to process a formatted date value, so you don't need to make any changes to the individual month/day/year values, and (2) there are no time elements in the string input, so you don't have to worry about zeroing those out, like you do with the current date.

Note 1: you will need to be aware of the local date formatting . . . the Date constructor does recognize the "mm/dd/yyyy" format, as an input, but will get confused by the "dd/mm/yyyy" format. If you have to handle that format, then you may need to do some extra processing.

Note 2: there are checks that you should do here to make sure that the value that you are receiving is a validly formatted date string, but that should all happen in earlier code, before your code ever tries to process the value.

Once you've got the two Date objects, it is just a simple comparison

if (d > x) {
    // ** the user-entered date is in the past **
}
else if (d < x) {
    // ** the user-entered date is in the future **
}
else {
    // ** the user-entered date is the current date **
}

Thanks very much very simple way to do it. However am still getting an error possibly because of format. do you know any simple way of changing to dd/mm/yyyy format? thanks — Raikonne, Jan 07 '14 at 00:31
Rather than changing the format of what the user enters, I would suggest putting validation on the field to make sure that the input is in the right format, before it is ever processed. The main reason behind this is that, you have no other way of controlling what value the user enters. If you make sure that the user has entered a value that matches that format that you need for your code, you won't have to worry about manipulating their data to get it to work. — talemyn, Jan 07 '14 at 16:40

Comparing dates in JavaScript

2 Answers2