JAVASCRIPT validate date in the form

Question

I tried to do the javascript to validate the date enter is in correct way. For example, for ETA(estimate time arrival), the date should be earlier than ETD(estimate time departure).

This is the form:

   <form>
      <label>ETA</label>
             <input  id="etadate" name="etadate" type="date" />
             <input name="etatime" type="time"/> 
      <label>ETD</label>
             <input  id="etddate" name="etddate" type="date"/>
             <input name="etddime" type="time"/>                                                                                        
   </form>

And for the javascript:

function validate1
 {
       var x = document.getElementById("etadate");
       var y = document.getElementById("etddate");

       if (x < y)
       {
          true;
       }
       else
       {
          false;
       }
}

When i tried to run the code, it didnt give any notice to the user that the date for eta should be earlier than etd. I dont know where to adjust so the code run correctly.

Answer 1

Use like this -

function validate1
{
   var x = new Date(document.getElementById("etadate").value);
   var y = new Date(document.getElementById("etddate").value);

   return x<y;
}

Answer 2

There are a couple of issues:

var x = document.getElementById("etadate");

will return a reference to the input element, which is an object. Objects shouldn't be compared using the < operator. You need:

var x = document.getElementById("etadate").value;

so that x is now a string.

Where input type date is supported, the browser should successfully parse the string to a date, so you might do:

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

However, in some browsers the returned string is an ISO 8601 formatted string like 2016-05-23, which will be parsed as UTC so for those west of GMT, it will appear to be one day earlier. You will need to deal with that.

Then there are browsers that don't support input type date, there are questions on SO about that.

Anyway, you need to:

1. Get the value of each input
2. Check that they generate a valid dates
3. If they do, compare the dates, so something like:

 function validate1 (form) { var x = new Date(form.etadate.value); var y = new Date(form.etddate.value); if (isNaN(+x) || isNaN(+y)) { alert("One of the dates is invalid"); return false; } if (x < y) { alert('ETA is before ETD'); } else { alert('ETD is before ETA'); } } 

 <form onsubmit="validate1(this); return false;"> <label>ETA</label> <input id="etadate" name="etadate" type="date"> <input name="etatime" type="time"/> <label>ETD</label> <input id="etddate" name="etddate" type="date"> <input name="etdtime" type="time"> <button>submit</button> </form> 

I've blocked submission with return false , naturally the function and listener should return true or false depending on the outcome of the comparison.

Also, the function declaration in the OP doesn't have a parameter list, so the syntax is invalid (fixed in the above).