Click here to Skip to main content
12,450,101 members (51,833 online)
Click here to Skip to main content
Add your own
alternative version

Stats

238.9K views
66 bookmarked
Posted

JavaScript Date Format

, 3 Dec 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
A fast VB-like date format function in JavaScript (requires JScript 5.5+).

Introduction

I needed a JavaScript date format function such as the Visual Basic Format function, in which you can pass a format string; my first approach was to issue a series of consecutive and "destructive" replace calls, but upon discovering that the 5.5 (or higher) version of JScript supported the use of a function as the replaceText argument of the replace method, I got creative.

Here's an example call of what I wanted:

SomeDiv.innerText = (new Date()).format('dddd, mmmm dd, yyyy.');

This would display:

Saturday, July 16, 2005

So in my first approach, I globally and case-insensitively replaced dddd with the corresponding string, which "destroyed" every occurrence, so that later in the code I could replace dd with the date number.

This worked just fine, but I knew that by inspecting the format specifier for a match, I could skip the search of every format specifier; say I only want the month and the date; well, by switching upon the format specifier (or rather "datepart" specifier), the year replacement will never be issued. Get it?

The fun part relies in the use of a function in the replaceText argument of the replace method; this way the $1 property as a function argument always represents the last match.

Other considerations include the format or "datepart" specifiers: none other than yyyy will be parsed as the year; months and days have the usual three flavors of fullname (mmmm), three-letter (mmm) or numeric (mm); hours (hh) can be rectified to the 12-hour format with the a/p specifier, and minutes (nn) and seconds (ss) may also be specified.

Implementation

WOFA, (Without Further Adou):

// a global month names array
var gsMonthNames = new Array(
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
);
// a global day names array
var gsDayNames = new Array(
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
);
// the date format prototype
Date.prototype.format = function(f)
{
    if (!this.valueOf())
        return ' ';

    var d = this;

    return f.replace(/(yyyy|mmmm|mmm|mm|dddd|ddd|dd|hh|nn|ss|a\/p)/gi,
        function($1)
        {
            switch ($1.toLowerCase())
            {
            case 'yyyy': return d.getFullYear();
            case 'mmmm': return gsMonthNames[d.getMonth()];
            case 'mmm':  return gsMonthNames[d.getMonth()].substr(0, 3);
            case 'mm':   return (d.getMonth() + 1).zf(2);
            case 'dddd': return gsDayNames[d.getDay()];
            case 'ddd':  return gsDayNames[d.getDay()].substr(0, 3);
            case 'dd':   return d.getDate().zf(2);
            case 'hh':   return ((h = d.getHours() % 12) ? h : 12).zf(2);
            case 'nn':   return d.getMinutes().zf(2);
            case 'ss':   return d.getSeconds().zf(2);
            case 'a/p':  return d.getHours() < 12 ? 'a' : 'p';
            }
        }
    );
}

Notes

  • A date with a value of 0 returns a non-breaking space.
  • Notice how the d variable is available to the replacement function (but the this object is not).
  • The zf number prototype can be found in Extending JavaScript Objects with Prototypes, where it is called 'zp' for zero padding. It pads a number with zeroes the specified number of times, up to the number's character length, i.e. 2 turns into 02, but 16 remains 16.
  • The regular expression looks for any of the bracketed pattern characters in a two+ sequence, or for the very specific a/p match.
  • Defining names globally helps and serves other purposes, i.e. listing days in a calendar.

Enjoy.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

hector [.j.] rivas
Software Developer (Senior) Code Authority, Inc.
United States United States
Pride in craftsmanship is my new thing.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Questionfor month part if u put mmm it is returning 000 Pin
Keerthi Kumar(Andar)16-Apr-15 0:24
memberKeerthi Kumar(Andar)16-Apr-15 0:24 
GeneralMy vote of 5 Pin
Niral Soni29-Jan-13 5:34
memberNiral Soni29-Jan-13 5:34 
GeneralMy vote of 4 Pin
Mario Majčica3-Dec-12 3:40
memberMario Majčica3-Dec-12 3:40 
GeneralRe: My vote of 4 Pin
hector.j.rivas3-Dec-12 4:18
memberhector.j.rivas3-Dec-12 4:18 
GeneralRe: My vote of 4 Pin
Mario Majčica3-Dec-12 4:21
memberMario Majčica3-Dec-12 4:21 
GeneralRe: My vote of 4 Pin
hector.j.rivas3-Dec-12 4:27
memberhector.j.rivas3-Dec-12 4:27 
GeneralPutting it all together so far Pin
murray562-Mar-07 16:15
membermurray562-Mar-07 16:15 
GeneralRe: Putting it all together so far Pin
murray562-Mar-07 17:09
membermurray562-Mar-07 17:09 
GeneralRe: Putting it all together so far Pin
Tor2k4-Mar-07 20:09
memberTor2k4-Mar-07 20:09 
GeneralRe: Putting it all together so far Pin
murray565-Mar-07 21:49
membermurray565-Mar-07 21:49 
Generalhey Pin
Frenaaa3-Dec-06 8:09
memberFrenaaa3-Dec-06 8:09 
GeneralRe: hey Pin
Tor2k8-Dec-06 7:22
memberTor2k8-Dec-06 7:22 
GeneralEasy but useful Pin
Ninghuan25-Apr-06 22:01
memberNinghuan25-Apr-06 22:01 
GeneralC#-like formats Pin
Kjetil Klaussen8-Mar-06 23:15
memberKjetil Klaussen8-Mar-06 23:15 
GeneralZF Pin
Tunez1-Aug-05 1:09
memberTunez1-Aug-05 1:09 
GeneralRe: ZF Pin
Tor2k2-Aug-05 14:00
memberTor2k2-Aug-05 14:00 
GeneralA couple of bugs Pin
Richard Deeming26-Jul-05 7:08
memberRichard Deeming26-Jul-05 7:08 
GeneralRe: A couple of bugs Pin
Tor2k26-Jul-05 10:42
memberTor2k26-Jul-05 10:42 
GeneralRe: A small addition Pin
Dougww5-Aug-05 3:13
memberDougww5-Aug-05 3:13 
GeneralRe: A small addition Pin
Tor2k6-Aug-05 7:16
memberTor2k6-Aug-05 7:16 
GeneralRe: A small addition Pin
Richard Deeming10-Aug-05 2:21
memberRichard Deeming10-Aug-05 2:21 
GeneralRe: A small addition Pin
Tor2k10-Aug-05 6:18
memberTor2k10-Aug-05 6:18 
GeneralRe: A small addition Pin
shadowcreeper20-Apr-09 10:05
membershadowcreeper20-Apr-09 10:05 
GeneralRe: A small addition Pin
Tor2k21-Apr-09 5:47
memberTor2k21-Apr-09 5:47 
GeneralRe: A small addition: string 'choose' io switch Pin
Tor2k8-Aug-05 9:30
memberTor2k8-Aug-05 9:30 
Ok, I changed the 'sup' format specifier with 's/p' and replaced the switch with a math operation:

case 's/p': var i = d.getDate() % 10; return 'thstndrd'.substr(2 * (i < 4) * i, 2);

You see, i (date mod 10) ranges from 0 to 9, but only 1, 2 and 3 have specific ordinal suffixes, so with a little math, and in a fashion similar to a choose statement in VB, I got rid of the switch statement for (hopefully) faster execution.

The math goes as follows: (i < 4) yields true for 0, 1, 2, 3 and false for everything else; fortunately for us, booleans yield 1 or 0 when used in arithmetic operations (in VB, 'true' actually equals -1). So this simple expression filters out the 'uninteresting' cases.

Next, we need the actual i value to pinpoint each case, that's why we multiply. This is also why we calculate and store i ahead of time, for we'll use it twice in the expression.

The rest involves doubling the value to get a 2-char index into the strange string we sub into, which is nothing but the ordinal suffixes, th st nd rd.

Incidentally, I realized you would need another date specifier to avoid presenting '06th', that is, skip the zero fill. But then again this datepart specifier itself might be enough (or maybe a 5d, ddddd that is) if you simply prepend the date.

Again, I just had fun figuring out an alternative to the switch. Richard Deeming corrected this anyway by pointing out that we'll get 11st i.o. 11th, 12nd and 13rd which are totally wrong; I guess the switch is in order, or an even messier math op.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160826.1 | Last Updated 3 Dec 2012
Article Copyright 2005 by hector [.j.] rivas
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid