Jel.Date

Format and parse dates and times with ease.
Plus some date formats we prepared earlier!

Formatting made easy

Dealing with dates and times in JavaScript has always been quite the chore. Have you ever written code like this?

// display the date in UK format (dd/mm/yyyy) var date = new Date(); var strDay; strDay = date.getDate(); if (strDay < 9) strDay = "0" + strDay.toString(); else strDay = strDay.toString(); strMonth = date.getMonth() + 1; // don't forget months are zero-based! if (strMonth < 9) strMonth = "0" + strMonth.toString(); else strMonth = strMonth.toString(); strYear = date.getFullYear().toString(); alert("Today is " + strDay + "/" + strMonth + "/" + strYear);

I know, I know, the code stinks for so many reasons - but I'm sure I've written something similar in my time as a web developer. And I also know that I didn't add 1 to the month on my first go either (yay zero-based months... ugh). What always made it more painful (yes, it's that dramatic) was to see how easy it is for those PHP guys - just pass a formatting string and you've done your work (and you can take a 2 hour lunch break, while the JavaScript guy pulls an all-nighter)

Well, JEL makes formatting dates easy too. Here's the above code written using the format function in Jel.Date:

alert("Today is " + Jel.Date.format(new Date(), "d/m/Y"));

So yes, the format function allows you to format dates just like in PHP, and you can read a complete syntax reference in the API documentation. But before you run along and change all of your code, JEL also includes a lot of common date formats in the Jel.Date.FORMAT object hash. So let's write that example again:

alert("Today is " + Jel.Date.format(new Date(), Jel.Date.FORMAT.UK));

What if I want to show the time as well, in 12 hour format with AM/PM?

alert("Today is " + Jel.Date.format(new Date(), Jel.Date.FORMAT.UK_12));

As you can probably see this is much easier, and there's a whole stack of date formats available to use, shown applied to the current date in the table below (you'll need JavaScript enabled to see them - sorry unobtrusive guys, I'm feeling lazy):

Jel.Date.FORMAT examples (current date and time)

Format Key	Format String	Current Date Example

It's worth pointing out that these date format strings are also used in the Jel.FormValidator validation classes - the format string on the end of a date validation class is the lowercase, dash-delimited version of each of the keys above. For example, if I want to validate a field is a date in the future in the format UK_12 above, my validation class is date-future-uk-12. What this also means is that if you need some trendy new date format validated, you can add it to this hash (BEFORE you instantiate your validator object), and the validator will understand your voodoo:

Jel.Date.FORMAT.CYBER = "Gi:n:Dj"; // e.g. Sun2:3:0800 ... then elsewhere ... <input id="cyberdate" name="cyberdate" class="required date-future-cyber" />

It's unlikely anyone will use CYBER format any time soon, but you get the idea.

Parsing dates

So we can format dates (see above), so we should be able to parse them right? Right (horrible version of this code omitted because I don't enjoy splitting strings, checking if they're numbers, ...):

// copy and paste the RHS of this line into your Firebug console, I dare you! var date = Jel.Date.parse("23/04/2005 8:30 PM", Jel.Date.FORMAT.UK_12);

This function supports all of the date formatting constants in Jel.Date.FORMAT listed in the table above. Please refer to the API documentation for Jel.Date.parse for the full syntax guide. Also note that the function will return boolean false if the string you pass is not in the expected format.

Jel.Date.convert - one for the lazy people!

We can now easily parse AND format dates with single lines of code - this also means that we can easily convert a date string from one format to another, by parsing the date string in the supplied format and then formatting it in another format, which is exactly what Jel.Date.convert does:

var displayDate = Jel.Date.convert("23/04/2005", Jel.Date.FORMAT.UK, Jel.Date.FORMAT.SHORT_MONTH_PHRASE); // "23rd Apr 2005"

Hopefully it's clear by now that the Jel.Date object can help you get back to writing the code you actually WANT to write - which is the whole point of libraries, I guess.

Return to manual index