Dates compare with javascript

Question

I have the following form:

<form action = "dt.jsp" METHOD = "GET" ONSUBMIT="return validateForm()">
<table>
   <tr>
     <td><input type=date name="fdate"/></td>
     <td><input type=date name="tdate"/></td>
   </tr>
</table>
<input  TYPE = "SUBMIT" VALUE = "Search by date">
</form>

I am validating the form using a date comparison function I found in this answer and the following function:

 function validateForm()
 {
   if(dates.compare(document.getElementsByName('fdate')[0].value,
                 document.getElementsByName('tdate')[0].value) == -1)
 {
    alert("to date must be bigger then from date");
    return false;
 }
 }

What is the problem of this code?

if you can't explain what's wrong, how are we supposed to guess? We don't know what `dates` is, or what `dates.compare()` does. In short there isn't enough information here for this to be a valid question — charlietfl, Sep 13 '14 at 03:43
dates.compare is javascript function to compare date (from here: http://stackoverflow.com/questions/492994/compare-dates-with-javascript) but it don't work in my case... can you suggest me another way to compare this two dates? — user3557163, Sep 13 '14 at 03:52
What format are you entering the date info in? The code you are using parses date strings by just passing them into the `Date` constructor. The `Date` constructor expects a [very specific format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse). I suspect it is not working because the date strings you are handing it do not conform to that format, thus `Date` is not producing a valid date object which is causing the comparison function to fail. — Useless Code, Sep 13 '14 at 04:18
Something else that would help with answering this question is **how** it isn't working. Is it always submitting despite having invalid dates? Is it never submitting even when it has dates that should pass the validation? — Useless Code, Sep 13 '14 at 04:57

score 0 · Answer 1 · edited May 23 '17 at 11:49

The code you are using parses date strings by just passing them into the Date constructor. The Date constructor expects a very specific format. I suspect it is not working because the date strings you are handing it do not conform to that format, thus Date is not producing a valid date object which is causing the comparison function to fail.

When dealing with dates moment.js is often very helpful. In this case it could make your not only more flexible but much more readable. Moment will allow you to provide a list of acceptable date formats it will use to parse the date strings you provide it. It also provides a number of methods for comparing dates such as isAfter.

Using these your code could be rewritten to something like this:

function validateForm() {
  var acceptedFormats = ["MM-DD-YYYY", "DD-MM", "DD-MM-YYYY"],
    fromDate = moment(document.getElementsByName('fdate')[0].value, acceptedFormats),
    toDate = moment(document.getElementsByName('tdate')[0].value, acceptedFormats);

  if (fromDate.isAfter(toDate)) { // much more readable, it's practically a sentence!
    alert("To Date must be after From Date");
    return false;
  }

  return true;
}

Something else I just noticed, your code will always fail to submit the form even if the date comparison passes. When the comparison fails you explicitly return false which stops the form from submitting. But when the test passes you don't return anything, implicitly returning undefined. When undefined is passed into the submit handler ONSUBMIT="return validateForm()", it will be coerced into false, also causing the form to not submit.

Dates compare with javascript

1 Answers1