Javascript Date Formatter

There is little (actually there is absolutely no) support in Javascript for formatting Date objects in a different formats when converting them to string, and for parsing dates from strings in different formats.

I have created a little “patch” to fix this issue, and to add the formatting and formatted parsing abilities to the Javascript Date object. This patch will add the following functions:

  • Date.format(dateObject, format)
  • dateObject.toFormattedString(format)
  • Date.parseFormatted(value, format)
  • dateObject.fromFormattedString(value, format)

The patch is called Javascript Date Format Patch, and it’s available on my github profile. Javascript Date Format Patch is dual licensed under the MIT and GPL licenses.

Format Description

When converting Date object to string, you can use any of the following format expressions, combined with other characters to get the output result you wish.

Format expression   Result
d the day as number without a leading zero (1 to31)
dd the day as number with a leading zero (01 to 31)
ddd the abbreviated localized day name (e.g. ‘Mon’ to ‘Sun’)
dddd the long localized day name (e.g. ‘Monday’ to ‘Sunday’)
M the month as number without a leading zero (1-12)
MM the month as number with a leading zero (01-12)
MMM the abbreviated localized month name (e.g. ‘Jan’ to ‘Dec’)
MMMM the long localized month name (e.g. ‘January’ to ‘December’)
yy the year as two digit number (00 to 99)
yyyy the year as four digit number
h the hour without a leading zero (0 to 23 or 1 to 12 if AM/PM display)
hh the hour with a leading zero (00 to 23 or 01 to 12 if AM/PM display)
H the hour without a leading zero (0 to 23, even with AM/PM display)
HH the hour with a leading zero (00 to 23, even with AM/PM display)
m the minute without a leading zero (0 to 59)
mm the minute with a leading zero (00 to 59)
s the second without a leading zero (0 to 59)
ss the second with a leading zero (00 to 59)
z the milliseconds without leading zeroes (0 to 999)
zzz the milliseconds with leading zeroes (000 to 999)
AP use AM/PM display. “AP” will be replaced by either “AM” or “PM”
A same as “AP”
ap use am/pm display. “ap” will be replaced by either “am” or “pm”
a same as “ap”

Usage

If you wish to use the Javascript Date Format Patch, you must:

  1. download date-format.js from the Javascript Date Format Patch Downloads section of the repository, and choose either the minified version or the standard one
  2. include it in your page like this:
    <script type="text/javascript" src="./js/date-format.js"></script>
  3. read the format description
  4. if you wish to localize the month and day names, read the localization part of this page

Then you will be able to format dates in desired format when converting to string like this:

  • using Date class’s static function
    var d = new Date(2001, 1, 3, 4, 5, 6, 7);
    Date.format(d, 'dd.MM.yyyy. HH:mm:ss.zzz');
    
  • using Date object’s member function
    var d = new Date(2001, 1, 3, 4, 5, 6, 7);
    d.toFormattedString('yyyy-MM-dd');
    

Then you will be able to parse dates in desired format like this:

  • using Date class’s static function
    var d = new Date();
    d = Date.parseFormatted
    (
        '03.02.2001. 04:05:06.007',
        'dd.MM.yyyy. HH:mm:ss.zzz'
    );
    
  • using Date object’s member function
    var d = new Date();
    d.fromFormattedString('2001-02-03', 'yyyy-MM-dd');
    

Localization

String representation of date values such as month names, day (of the week) names can be easily translated for any language, by replacing the values in the internationalization object.

For example:

// croatian localization
Date.formatLogic.i18n =
{
	dayNames:
	[
		'Nedjelja',
		'Ponedjeljak',
		'Utorak',
		'Srijeda',
		'Četvrtak',
		'Petak',
		'Subota'
	],
	shortDayNames:
	[
		'Ned',
		'Pon',
		'Uto',
		'Sri', 
		'Čet',
		'Pet',
		'Sub'
	],
	monthNames:
	[
		'Siječanj',
		'Veljača',
		'Ožujak',
		'Travanj',
		'Svibanj',
		'Lipanj',
		'Srpanj',
		'Kolovoz',
		'Rujan',
		'Listopad',
		'Studeni',
		'Prosinac'
	],
	shortMonthNames:
	[
		'Sij',
		'Vel',
		'Ožu',
		'Tra',
		'Svi',
		'Lip',
		'Srp',
		'Kol',
		'Ruj',
		'Lis',
		'Stu',
		'Pro'
	]
};

Croatian translation can also be downloaded from Javascript Date Format Patch Downloads section of the repository.

One thought on “Javascript Date Formatter

  1. Check out this library:

    http://plugins.jquery.com/project/fIsForFormat

    It is the most useful thing I’ve found when it comes to Date formatting in JavaScript. Not only does it make formatting a piece of cake, but it has many other cool features as well!

    I have no idea why it is listed as a jQuery plugin. I went through the code and couldn’t find any references to anything that looked like jQuery (or any other libraries for that matter.) I’ve used it standalone and it works just fine.

    Maybe you and the developer can team up to make one super date tool!