1. Technology

Date Format Method

Adding PHP Style Formatting to the Date Object

Some programming languages make it really simple to output date and time information in whatever format you like using a single command. You simply specify a string of formatting characters that defines to the function what format you want the date in. JavaScript does not have such a function built in and so the conventional approach has been to retrieve all the pieces of the date that you need and build the format you require in your own code.

With this extension to the date method you can now output your dates and times easily in whatever format you like with a single command using the format method that this script adds to all your date objects.

I considered several of the different ways in which other programming languages allow the format to be defined before deciding to create a JavaScript equivalent to the PHP date format commands. Well its not 100% the same because JavaScript doesn't allow access to microseconds the way PHP does or the name of the timezone and I have implemented a couple of the options slightly differently in order to simplify the amount of code required.

Those of you familiar with PHP should find the following list of what the letters in the format command mean very familiar. The only differences are a couple of timezone options that JavaScript doesn't support and a few extras that I have added.

  • d Day of the month, 2 digits with leading zeros
  • D A textual representation of a day, three letters
  • j Day of the month without leading zeros
  • l (lowercase 'L') A full textual representation of the day of the week
  • S Ordinal suffix for the day of the month, 2 characters st, nd, rd or th
  • w Numeric representation of the day of the week with Sunday = 0
  • N Numeric representation of the day of the week with Sunday = 7
  • z The day of the year (starting from 0)
  • W The week of the year (the week in which the year changes belongs to the year with the most days)
  • o The year to match with the above week (for the up to three days that may be in a week belonging to the adjacent year).
  • F A full textual representation of a month, such as January or March
  • m Numeric representation of a month, with leading zeros
  • M A short textual representation of a month, three letters
  • n Numeric representation of a month, without leading zeros
  • t Number of days in the given month
  • L Whether it's a leap year 1 if it is a leap year, 0 otherwise
  • Y A full numeric representation of a year, 4 digits
  • y A two digit representation of a year
  • a Lowercase Ante meridiem and Post meridiem or pm
  • A Uppercase Ante meridiem and Post meridiem AM or PM
  • g 12-hour format of an hour without leading zeros
  • G 24-hour format of an hour without leading zeros
  • h 12-hour format of an hour with leading zeros
  • H 24-hour format of an hour with leading zeros
  • i Minutes with leading zeros
  • s Seconds, with leading zeros
  • u Microsoeconds (always in thousands since JavaScript only supports milliseconds)
  • I 1 if daylight saving time, 0 if not
  • O Difference to Greenwich time (GMT) in hours
  • P Difference to Greenwich time (GMT) with colon between hours and minutes
  • Z Timezone offset in seconds (East positive, West negative)
  • B Swatch beats
  • U Seconds since the Unix Epoch
  • c ISO 8601 date
  • r RFC 2822 formatted date (I think)
  • ^ escapes the meaning of the following character so that it gets passed through (since \ that PHP uses already has a meaning in JavaScript)
  • X week number where weeks run Sunday to Saturday and 1st Jan is always in week 1 (not in PHP)
  • x as X bit with a leading zero where the week number is less than 10 (not in PHP)
  • R day of year with 1st Jan = 001 always 3 digits including leading zeroes (not in PHP)
  • J Julian Day number (not in PHP)
  • K returns 'DST for daylight saving time, otherwise returns 'Std' (not in PHP)

Note that any non-alphabetic character will be passed straight through allowing you to add punctuation to your date/time field.

To use this method with your dates you first need to copy the following code and save it in a file called dateformat.js. Note that this code also includes a range of my other date methods that the format method uses to build the results.

We next add that script into the head our page using the following code.

<script type="text/javascript" src="dateformat.js">
</script>

Now all that remains is to call the format method to retrieve the date/time from the date object in whatever format you want. For example to display the current date and time in the longest form it can appear in using the name of the day, day number, ordinal, name of the month, hour, minutes, seconds, and timezone offset we could specify:

var today = new Date();
document.getElementById('datetime').innerHTML = today.format('l, jS F Y h:i:sa P');

We would then have the date inserted into the tag with the 'datetime' id so that it looks like this:

The one thing that the format method can't do is to dynamically update the time displayed on the page in real time (you'd need to reload it at least once a second to achieve that).

Related Video
How to Format Slides in PowerPoint
Maximize Evening Quality Time

©2014 About.com. All rights reserved.