In this JavaScript article tutorial, jsB@nk would like to guide you full detailed instructions and JavaScript example codes to check a validation of date and time. This Date/Time Validation in JavaScript tutorial provides you many real cases for JavaScript date and time validations, along with various possible JavaScript solutions.

Moreover, this DateTime validation in JavaScript tutorial does not use any JavaScript framework library, so you can reach these JavaScript validating ideas, JavaScript validated solutions and JavaScript example codes easily through plain-code JavaScript.

Try more other JavaScript date and time examples, JavaScript date and time solutions if you need:
- Helpful JavaScript Time and Date Picker, Plugins for Frameworks
- jsDatePick - A Simple Free Javascript Date Picker
- JavaScript Timer Countdown

• Demo
• Enlarge
• Reload
• New window

Modularising the code

As we've seen before, creating re-usable functions can significantly reduce the size of your JavaScript code. These functions can even be included from an external javascript file so that the browser can cache them, and so the programmer isn't always copying and pasting.

In this case, we've created a stand-alone functions which will validate a date field:

  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

  function checkDate(field)
  {
    var allowBlank = true;
    var minYear = 1902;
    var maxYear = (new Date()).getFullYear();

    var errorMsg = "";

    // regular expression to match required date format
    re = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
    
    if(field.value != '') {
      if(regs = field.value.match(re)) {
        if(regs[1] < 1 || regs[1] > 31) {
          errorMsg = "Invalid value for day: " + regs[1];
        } else if(regs[2] < 1 || regs[2] > 12) {
          errorMsg = "Invalid value for month: " + regs[2];
        } else if(regs[3] < minYear || regs[3] > maxYear) {
          errorMsg = "Invalid value for year: " + regs[3] + " - must be between " + minYear + " and " + maxYear;
        }
      } else {
        errorMsg = "Invalid date format: " + field.value;
      }
    } else if(!allowBlank) {
      errorMsg = "Empty date not allowed!";
    }
    
    if(errorMsg != "") {
      alert(errorMsg);
      field.focus();
      return false;
    }
    
    return true;
  }

Note: To convert to mm/dd/yyyy (US format) just swap regs[1] and regs[2] in the above code.

We're STILL not checking that the date entered actually exists. For an idea of how that might be done read the next article Form Validation: Credit Cards and Dates.

And another function that will validate a time input:

  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

  function checkTime(field)
  {
    var errorMsg = "";

    // regular expression to match required time format
    re = /^(\d{1,2}):(\d{2})(:00)?([ap]m)?$/;
    
    if(field.value != '') {
      if(regs = field.value.match(re)) {
        if(regs[4]) {
          // 12-hour time format with am/pm
          if(regs[1] < 1 || regs[1] > 12) {
            errorMsg = "Invalid value for hours: " + regs[1];
          }
        } else {
          // 24-hour time format
          if(regs[1] > 23) {
            errorMsg = "Invalid value for hours: " + regs[1];
          }
        }
        if(!errorMsg && regs[2] > 59) {
          errorMsg = "Invalid value for minutes: " + regs[2];
        }
      } else {
        errorMsg = "Invalid time format: " + field.value;
      }
    }

    if(errorMsg != "") {
      alert(errorMsg);
      field.focus();
      return false;
    }
    
    return true;
  }

and it's now clear to just about anyone what main validation function is doing:

  function checkForm(form)
  {
    if(!checkDate(form.startdate)) return false;
    if(!checkTime(form.starttime)) return false;
    if(!checkDate(form.enddate)) return false;
    return true;
  }

The output will be almost identical to the previous example.

We could even write the checkForm function now as:

  function checkForm(form)
  {
    return checkDate(form.startdate) && checkTime(form.starttime) && checkDate(form.enddate);
  }

Adjusting the code for different date formats

Visitors from some countries may find it confusing that we're using the dd/mm/yyyy date format instead of the American or other standards. Modifying the code to account for these differences is quite simple and involves only minor changes.

US Date Format MM/DD/YYYY

In the checkDate function above you only need to replace references to regs[1] with regs[2] and vice-versa to reflect the change in order of the day and month values.

European Format YYYY-MM-DD

In the checkDate function above you only need to change the regular expression (re) to /^(\d{4})-(\d{1,2})-(\d{1,2})/ and then replace references to regs[1] with regs[3] and vice-versa as the year and day values have now changed position.

Related Articles

• JavaScript: Form Validation
• JavaScript Form Validating Tips, Code and Examples
• JavaScript Date and Time Validating Tutorials
• JavaScript: Form Validation: Credit Cards and Dates
• Design Better HTML5 Form Element Validator

• Code
• Print

• Comment (1)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New