JavaScript Date Formatting - An Unorthodox Way
Most date formatting implementations use format strings where format specifiers like “mm”, “mmm”, “HH”, etc. are used for selecting different components of a date. Here’s a different approach that allows you to use more human-readable format specifiers (while being rather verbose).
Date.prototype.format = function (fmt) {
var date = this;
return fmt.replace(
/\{([^}:]+)(?::(\d+))?\}/g,
function (s, comp, pad) {
var fn = date["get" + comp];
if (fn) {
var v = (fn.call(date) +
(/Month$/.test(comp) ? 1 : 0)).toString();
return pad && (pad = pad - v.length)
? new Array(pad + 1).join("0") + v
: v;
} else {
return s;
}
});
};
Whatever you enclose inside curly brackets will be used as a format specifier:
var now = new Date();
alert(now.format("This is the year {FullYear}"));
// Output: This is the year 2008
You can also zero-pad values:
alert(now.format("{FullYear}-{Month:2}-{Date:2}"));
// Output: 2008-09-02
alert(now.format("{Hours:2}:{Minutes:2}:{Seconds:2}.{Milliseconds:3}"));
// Output: 15:47:32.156
If an unknown format specifier is used, the format specifier will be used as it is:
alert(now.format("{Hourz} hours {Minutes} minutes"));
// Output: {Hourz} hours 51 minutes
Invalid format specifiers are also handled gracefully:
alert(now.format("{FullYear:}));
// Output: {FullYear:}
Here’s the complete set of format specifiers that are recognized:
- Date
- Returns the day of the month for the specified date according to local time.
- Day
- Returns the day of the week for the specified date according to local time.
- FullYear
- Returns the year of the specified date according to local time.
- Hours
- Returns the hour in the specified date according to local time.
- Milliseconds
- Returns the milliseconds in the specified date according to local time.
- Minutes
- Returns the minutes in the specified date according to local time.
- Month
- Returns the month in the specified date according to local time.
- Seconds
- Returns the seconds in the specified date according to local time.
- Time
- Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC.
- TimezoneOffset
- Returns the time-zone offset in minutes for the current locale.
- UTCDate
- Returns the day (date) of the month in the specified date according to universal time.
- UTCDay
- Returns the day of the week in the specified date according to universal time.
- UTCFullYear
- Returns the year in the specified date according to universal time.
- UTCHours
- Returns the hours in the specified date according to universal time.
- UTCMilliseconds
- Returns the milliseconds in the specified date according to universal time.
- UTCMinutes
- Returns the minutes in the specified date according to universal time.
- UTCMonth
- Returns the month in the specified date according to universal time.
- UTCSeconds
- Returns the seconds in the specified date according to universal time.
Namely, all Date instance getters. Month and UTCMonth require special handling since the values they return are zero-based.