Unable to validate double digit month using Javascript

Question

I have an HTML form where I am allowing users to enter a date to print out a report. However, if that date is within 3 days of the current date, I have it set to tell the user that they must wait 3 days. For some reason the code works when I enter something like "09/30/2012" but when I enter "10/01/2012", the error check skips. It seems at though, if it's a double digit month (10, 11, and 12), it complete skips the error check. Please let me know if you have any ideas. Thanks

JS Code:

var date = myForm.SC_date.value;
var d = new Date(date);
var varBegin = (d.getMonth()+1) + "-" + (d.getDate()-3) + "-" + d.getFullYear()
re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;

if (myForm.SC_date.value == "")
    window.alert("Please enter the requested date of variance.  NOTE: Date must be 3 days prior to today's date.")

            //Here is where I am having issues  
/*else if(new Date(date) > new Date(varBegin))
    window.alert("Invalid date.  You must wait at least 3 days before you can request a report.")*/

else if(!myForm.SC_date.value.match(re))
    window.alert("Invalid date.  Please enter the date as follows: mm/dd/yyyy.")

HTML Code:

<td>Date of Variance </td>
    <td colspan="2"><input name="SC_date:*" id="SC_date" type="text" tabindex="06">
      </textarea><b><span class="style3">*</span>&nbsp;&nbsp;</b><span class="style2">(mm/dd/yyyy)</span>
    </td>

Answer 1

I don't think you want to construct your "3 days ago" date by manipulating a string. I.e., this snippet here:

var varBegin = (d.getMonth()+1) + "-" + (d.getDate()-3) + "-" + d.getFullYear()

First, I'm not sure why you're using hyphens as delimiters here, when you are using forward-slashes as delimiters in your input field?

In any case, that's not a reliable way to construct the date. When you feed a string into the constructor of a Date object, you are effectively calling Date.parse(). That behaves differently on different browsers.

Check this out:

> new Date('1-1-2012');
Sun Jan 01 2012 00:00:00 GMT-0800 (PST)

> new Date('01-01-2012');
Sun Jan 01 2012 00:00:00 GMT-0800 (PST)

> new Date('2012-1-1');
Sun Jan 01 2012 00:00:00 GMT-0800 (PST)

Looks pretty good, right? But that's on Chrome.

Now check out what happens in an up-to-date version of Firefox, with the exact same calls:

> new Date('1-1-2012');
Date {Invalid Date}

> new Date('01-01-2012');
Date {Invalid Date}

> new Date('2012-1-1');
Date {Invalid Date}

> new Date('2012-01-01');
Date {Sat Dec 31 2011 16:00:00 GMT-0800 (PST)}

Furthermore, look at this behavior, in both browsers:

> new Date('2012-01-01');
Sat Dec 31 2011 16:00:00 GMT-0800 (PST)

Simply prepending zeroes to the month and date digits causes a time warp! You have to set the time and a timezone (for me, PST) to make that go away:

> new Date('2012-01-01T00:00:00-08:00')
Sun Jan 01 2012 00:00:00 GMT-0800 (PST)

Basically, dealing with date string parsing is a headache. You don't want to have to digest and account for specs like this, this, and this.

So, here's a better alternative -- pass the year, month, and date values (in that order) to the constructor of the Date object. That will reliably create the date for you, so your comparisons are valid.

Like this, for your specific example:

var WARNING_PERIOD_IN_DAYS = 3;
// Extract month, day, year from form input, 'trimming' whitespace.
var re = /^\s*(\d{1,2})\/(\d{1,2})\/(\d{4})\s*$/;
var match = re.exec(inputVal); // from "myForm.SC_date.value".
if (match) {
  var month = parseInt(match[1]) - 1; // Zero-indexed months.
  var date = parseInt(match[2]);
  var year = parseInt(match[3]);
  var inputDate = new Date(year, month, date);
  var currentDate = new Date();
  var threeDaysAgo = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay() - WARNING_PERIOD_IN_DAYS);
  console.log((inputDate > threeDaysAgo) ? 'Within warning period' : 'No warning needed');
}

Speaking of specs, there's one cool thing to note here, which is that in JavaScript, you can "wrap" the date value (it can be too large, or negative), and the resulting Date will still be valid and correct. Here's why:

From the ECMAScript 262 spec, here's what happens when you call setDate():

**15.9.5.36 Date.prototype.setDate (date)**
1. Let t be the result of LocalTime(this time value).
2. Let dt be ToNumber(date).
3. Let newDate be MakeDate(MakeDay(YearFromTime(t), MonthFromTime(t), dt), TimeWithinDay(t)).
4. Let u be TimeClip(UTC(newDate)).
5. Set the [[PrimitiveValue]] internal property of this Date object to u.
6. Return u.

This is the key bit: MakeDay(YearFromTime(t), MonthFromTime(t), dt)

MakeDay gets the year and the month from the current time value of the Date object (in milliseconds of epoch time), and does this:

**15.9.1.12 MakeDay (year, month, date)**
The operator MakeDay calculates a number of days from its three arguments, which must be ECMAScript Number values. This operator functions as follows:
1. If year is not finite or month is not finite or date is not finite, return NaN.
2. Let y be ToInteger(year).
3. Let m be ToInteger(month).
4. Let dt be ToInteger(date).
5. Let ym be y + floor(m /12).
6. Let mn be m modulo 12.
7. Find a value t such that YearFromTime(t) == ym and MonthFromTime(t) == mn and DateFromTime(t) == 1;
but if this is not possible (because some argument is out of range), return NaN. 
8. Return Day(t) + dt - 1.

This looks rather involved, but basically it's:

• The floor, modulo, and date==1 bits handle month rollovers (months that are negative or greater than 12).
• The resulting instant in epoch time is converted to a number of days.
• Your date value is added to that number of days. If your date value is negative, that's fine, it will just be subtracted.
• The result is passed back to setDate().
• setDate calls MakeDate(), which converts the number of days plus the intra-day time into milliseconds in epoch time.
• The Date object's internal time is set to this new epoch time.

That's why you can do stuff like this (comments taken from the MakeDay() function in the V8 JS engine project):

//     MakeDay(2007, -4, 20) --> MakeDay(2006, 8, 20)
//     MakeDay(2007, -33, 1) --> MakeDay(2004, 3, 1)
//     MakeDay(2007, 14, -50) --> MakeDay(2007, 8, 11)

Ok, so that was almost certainly too much detail for this particular problem... but I just wanted to make clear what's really going on behind the scenes. Thanks for your patience.

And... just one last thing...

You have a random </textarea> hanging out in that HTML snippet. If there is an opening <textarea> somewhere before it, then it's incorrectly enclosing some of your other elements. If there is no opening <textarea>, then delete it.

Answer 2

Use a library that lets you control the date formats accepted, e.g. Globalize.js or Date.js. Then define the exact test you wish to carry out especially whether time of the day is significant and whether the test should be relative to current time in user’s system (which is what you get with new Date() without arguments). You can then e.g. calculate a time difference as outlined by @Mamsaac and convert milliseconds to days with simple arithmetic.

It is illogical to use Date() and then, without checking the result, start doing pattern matching on the input. Moreover, Date() is by definition system-dependent and should seldom be used. There is no guarantee that it will accept a format like mm/dd/yyyy at all.

Answer 3

If you don't care about the time of the day, I recommend you do the following:

var dUser = new Date(date); //just like you did before
var dVarBegin = new Date("10/05/2012"); //here you do whatever is the date you are setting.
var diff = dVarBegin.getTime() - dUser.getTime();
//now diff is the difference in milliseconds!

I don't fully understand your requirements in relation to the 3 days. However, if what you needed was to compare dates, now you can! I hope this works for you. If you need something more, please ellaborate a little bit on the 3 days thing.