Click here to Skip to main content
Click here to Skip to main content

JavaScript Date Format

, 7 Aug 2005
Rate this:
Please Sign up or sign in to vote.
A fast VB-like date format function in JavaScript (requires JScript 5.5+).
This is an old version of the currently published article.

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 (not shown) prefixes 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. Behave and I may supply the prototype.
  • 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 has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

hector [.j.] rivas
Software Developer (Senior) CompuCom, Inc.
United States United States
Hector J. Rivas has 25+ years of experience managing hardware and software development under many different operating systems, platforms and languages. He has developed microcontroller interfaces and PC games; authored computer based training lessons and delivered fully functional financial and administrative data-intensive applications, as well as image processing and other calculation-intensive applications. Mr. Rivas has also managed Y2K remediation, large scale platform migration and Web site projects, from R&D to actual deployment.
Follow on   LinkedIn

Comments and Discussions


Discussions posted for the Published version of this article. Posting a message here will take you to the publicly available article in order to continue your conversation in public.
 
GeneralMy vote of 5 PinmemberNiral Soni29-Jan-13 5:34 
GeneralMy vote of 4 PinmemberMario Majčica3-Dec-12 3:40 
GeneralRe: My vote of 4 Pinmemberhector.j.rivas3-Dec-12 4:18 
GeneralRe: My vote of 4 PinmemberMario Majčica3-Dec-12 4:21 
GeneralRe: My vote of 4 Pinmemberhector.j.rivas3-Dec-12 4:27 
GeneralPutting it all together so far Pinmembermurray562-Mar-07 16:15 
GeneralRe: Putting it all together so far Pinmembermurray562-Mar-07 17:09 
GeneralRe: Putting it all together so far PinmemberTor2k4-Mar-07 20:09 
GeneralRe: Putting it all together so far Pinmembermurray565-Mar-07 21:49 
Generalhey PinmemberFrenaaa3-Dec-06 8:09 
GeneralRe: hey PinmemberTor2k8-Dec-06 7:22 
GeneralEasy but useful PinmemberNinghuan25-Apr-06 22:01 
GeneralC#-like formats PinmemberKjetil Klaussen8-Mar-06 23:15 
GeneralZF PinmemberTunez1-Aug-05 1:09 
GeneralRe: ZF PinmemberTor2k2-Aug-05 14:00 
GeneralA couple of bugs PinmemberRichard Deeming26-Jul-05 7:08 
GeneralRe: A couple of bugs PinmemberTor2k26-Jul-05 10:42 
GeneralRe: A small addition PinmemberDougww5-Aug-05 3:13 
GeneralRe: A small addition PinmemberTor2k6-Aug-05 7:16 
GeneralRe: A small addition PinmemberRichard Deeming10-Aug-05 2:21 
GeneralRe: A small addition PinmemberTor2k10-Aug-05 6:18 
GeneralRe: A small addition Pinmembershadowcreeper20-Apr-09 10:05 
GeneralRe: A small addition PinmemberTor2k21-Apr-09 5:47 
GeneralRe: A small addition: string 'choose' io switch PinmemberTor2k8-Aug-05 9:30 
GeneralRe: A small addition: string 'choose' io switch Pinmemberjsc424-Dec-12 22:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web04 | 2.8.140721.1 | Last Updated 8 Aug 2005
Article Copyright 2005 by hector [.j.] rivas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid