Accéder au contenu principal

Date format matching regex

Regex is a must-learn for any programmer, plus it is always interesting to see how an apparently complex check can be done with a basic rule (...or how a simple check sometimes requires a long and obscure rule, but that's the whole fun of it :P).

Here's a short and useful regex to match a date field (for instance when submitting a form).

// expected field value format: YYYY-MM-DD
var e = document.getElementById("myDateField").value;
var m = e.match(/(20\d\d|19\d\d)\-(0\d|1[012])\-([012]\d|3[01])/);


Breaking it down:
/(20\d\d|19\d\d)\-(0\d|1[012])\-([012]\d|3[01])/

1. Year
(20\d\d|19\d\d)

Trying to match either "20" followed by 2 digits (2000, 2001,2002,...2099) or "19" and then 2 digits (1900...1999).
Would not match: 20a0, 201, 20AA

2. Month
(0\d|1[012])

Trying to match either "0" followed by one digit (01...09) or "1" followed by 0, 1 or 2 (hence only 10,11 or 12). We assume here that the month must be 2-digit long. Note that this would not be a problem when later parsing the date, since most systems remove "0" in front of strings/numbers.
Would not match:  4, 15, 21

3. Day
([012]\d|3[01])

Matches "0", "1" or "2" followed by one digit (04, 15, 28) or "3" followed by either 0 or 1 (30 or 31 basically).
Would not match : 8, 35
 
Note that in between each component (YYYY, MM and DD), the regex tries to match a dash (using a backslash to escape it; not necessary but I tend to escape a lot of characters :)). 

Note that not only can you validate the date format, but the regex also helps you retrieve immediately any of the components (year, month or date), since they are all captured within groups (between parenthesis).

Commentaires

Posts les plus consultés de ce blog

A binary clock in Javascript

Just a short post to share a tiny project I recently worked on: a binary clock. The script is written in pure Javascript (no jQuery for a change), and the design of the buttons was rapidly made in Photoshop, so nothing fancy...but I really wanted to create this :-) http://manuthommes.be/toolbox/binaryclock/ As usual, the code is not obfuscated so you can have a look and feel free to copy/edit.

HTML tables and auto-sizing cell heights : a workaround

Although this was common practice in the early days of the Web, working with HTML tables when it comes to building a webpage layout should be avoided as much as possible nowadays. CSS offers all the tools that are needed to create perfectly dynamic and flexible layouts, so you really should only rely on HTML tables to present actual data. This being said, it happens that you don't have the choice, and that this just what I've learned recently in my work. In the context of a client project, the framework I've had to use (Peoplesoft, an HRIS system) indeed generates HTML pages presenting a structure quite "2000"-ish, consisting in a complex nesting of HTML tables. Moreover, each time you add a component on the page (via the system itself, not when hardcoding it), a system TABLE is create to wrap the object. This can cause obviously a lot of problems, but in this case, my problem was quite specific. A few pages of the system use a well-defined table layout :