HTML5 Pattern Regex Date Validator for 1900-2099 using YYYY-MM-DD

HTML5 pattern is a wonderful tool for validating user input, and date validation is a common problem if one doesn't want to use a date plugin.

This date validator has the following features:

• It validates dates between 1999 and 2099 in the format YYYY-MM-DD
• It takes leap years into account (i.e. Feb 29, 2014 is not a valid date)
• It knows which months have 30 days and which have 31
• It allows the following separators: period(.), comma(,), forward slash(/), hyphen(-), space( )

Use the following code to implement your date validator:

<input type="text" pattern="^(?:((?:19|20)[0-9]{2})[\/\-. ]?(?:(0[1-9]|1[0-2])[\/\-. ]?([0-2][1-8]|[12]0|09|19)|(0[13-9]|1[0-2])[\/\-. ]?(29|30)|(0[13578]|1[02])[\/\-. ]?(31))|(19(?:[0][48]|[2468][048]|[13579][26])|20(?:[02468][048]|[13579][26]))[\/\-. ]?(02)[\/\-. ]?(29))$">

If you would like to restrict your dates to particular separators, simply remove the ones you do not want from the [\/\-. ] portion of the regular expression.

If you would to like to allow partial dates, such as YYYY-MM-00, use the following regular expression instead (note that the only change was to add a 0 within [12]):

<input type="text" pattern="^(?:((?:19|20)[0-9]{2})[\/\-. ]?(?:(0[1-9]|1[0-2])[\/\-. ]?([0-2][1-8]|[012]0|09|19)|(0[13-9]|1[0-2])[\/\-. ]?(29|30)|(0[13578]|1[02])[\/\-. ]?(31))|(19(?:[0][48]|[2468][048]|[13579][26])|20(?:[02468][048]|[13579][26]))[\/\-. ]?(02)[\/\-. ]?(29))$">

Warning: Remember that your browser may not support the pattern attribute. Always have another option for validating user input, such as javascript that reads the pattern attribute and validates it using RegExp or other alternatives.

Attribution: This validator was originally found here.