BadAss Javascript Date Validator – Useful for Rails

by webdood on Jul.18, 2009, under Javascript, Ruby on Rails, Software Development

Should make a point of posting cool routines like the one below as they are useful to many.

I have seen quite a lot of good examples of folks using (and expanding upon) routines I wrote for some of the Gadgets that ship with Vista (to be found in library.js if you have a Vista Box) and for some of AOL’s (apparently deprecated) Mac OSX Widgets.

Functions like showOrHide, getLocalizedString, getSpinner (emulates Vista-like spinner image) I have seen in use all over the place.

Here is a somewhat badass Date Validator routine I wrote today that takes in either a string date value or an <INPUT> Element Object and validates the date to be formatted as DD-MM-YYYY.

I wrote it for use by a Ruby on Rails application, but it’s pretty handy as a general library function.

var DATE_REGEX  = /^(\d{2})-(\d{2})-(\d{4})$/
//                                                                            //
// validateDate([object|string] oHTMLInputElement) - Validates a date value   //
// ===============================================                            //
//   You can pass in the id to an <input> Element, an actual               //
//   oHTMLInputElement or an actual date value in the form of a string        //
//                                                                            //

function validateDate(oHTMLInputElementOrDateValue) {
  var theDateValueToValidate = "";
  var theValidatedDateValue = false;
  var bIsInputElement = false;
  if (typeof(oHTMLInputElementOrDateValue)=="string")  {
    var oHTMLInputElement = document.getElementById(oHTMLInputElementOrDateValue);
    if (oHTMLInputElement && typeof(oHTMLInputElement=="object") && (oHTMLInputElement.tagName=="INPUT")) {
      theDateValueToValidate = oHTMLInputElement.value;
      bIsInputElement = true;
    } else {
      // Presumably they just passed in a date string
      theDateValueToValidate = oHTMLInputElementOrDateValue;
      bIsInputElement = false;
  } else {
    // They have passed in an Object
    if (typeof(oHTMLInputElementOrDateValue=="object") && (oHTMLInputElementOrDateValue.tagName=="INPUT")) {
      var oHTMLInputElement = oHTMLInputElementOrDateValue;
      theDateValueToValidate = oHTMLInputElement.value;
      bIsInputElement = true;

  // If we have a date value to actually validate, let's get started
  if (theDateValueToValidate != "") {
    var theDateValue = theDateValueToValidate.replace(/\//g,"-");  // Ruby-side only accepts hyphens
    if (DATE_REGEX.test(theDateValue)) {
      theValidatedDateValue = theDateValue;
    } else {
      if (theDateValue.indexOf('-') > -1) {
        var theMonth = theDateValue.split('-')[0];
        var theDay   = theDateValue.split('-')[1];
        var theYear  = theDateValue.split('-')[2];
        // If they've entered a single digit for either Day or Month, pad with zero accordingly
        theMonth = parseInt(theMonth).PadWithZero();
        theDay   = parseInt(theDay).PadWithZero();
        if (theYear.length==2) { theYear = "20" + theYear; }    // If they've entered a two-digit year, assume it's in the 21st century
        theDateValue = theMonth + "-" + theDay + "-" + theYear; // Rebuild the date. Hopefully this will work
        if (DATE_REGEX.test(theDateValue)) {
          theValidatedDateValue = theDateValue;

      // If we get to this point and none of our efforts have worked to format the date
      // as "required", throw an error (if they are using an INPUT element)
      if (!theValidatedDateValue && bIsInputElement) {
        alert("ERROR: Date must be formatted as follows:\n\n\tDD-MM-YYYY\n\nPlease correct before continuing");

  if (bIsInputElement && theValidatedDateValue) {
    oHTMLInputElement.value = theValidatedDateValue;
  return theValidatedDateValue;

Hope you find this one useful as well.

Shannon Norrell

Now on GitHub as well

Leave a Comment :, , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!


A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org