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

jQuarax - a parallax plugin

This plugin is still in the making and complete documentation (as well as a downloadable package) will be available later. Sample code and quick variable explanation further below. jQuarax-latest.js:  var jquarax = {   load: loader }; function loader(){   jQuery(document).ready(function(){     // parallax script     $(".jquarax-div-container").scroll(function(){       scrollPos = parseInt($(".jquarax-div-container").scrollTop());       scrollPosPC = (100/parseInt($(".jquarax-div-container").css("height")))*(parseInt($(".jquarax-div-container").scrollTop()));       $(".jquarax-object").each(function(e){         var unit = $(this).attr("frmode");          if(unit=="%"){scrollPos=scrollPosPC;}         var startIt = parseInt($(this).attr("frstart"));  ...

Reordering Javascript functions

If you have already injected some Javascript dynamically in a page (possibly because you cannot modify the original scripts directly), you may have realised the order in which Javascript functions are triggered is dependent on the order of declaration. Hence, if you try and bind a new "onclick" handler on a button for which another function has already been bound, the latter will be executed before yours. Here is a simple trick to reorder the order of execution.  Say your original code looks like so: <script> function showAlert(message){      alert(message); } </script> [...] <input type=text id="myButton" onClick="showAlert(this.value);" /> You can 't modify the HTML part and yet y ou want to execute a new function of your own before the alert message of showAlert is sent, for instance the following one: function changeMessage(newMessage){       document.getElementById("myButton").value=newMessage; ...