Question
How do I format a Javascript Date
object as a string? (Preferably in the
format: 10-Aug-2010
)
Answer
For custom-delimited date formats, you have to pull out the date (or time)
components from a
DateTimeFormat
object (which is part of the ECMAScript Internationalization
API),
and then manually create a string with the delimiters you want.
To do this, you can use
DateTimeFormat#formatToParts
.
You could destructure the array, but that is not ideal, as the array output
depends on the locale:
{ // example 1
let formatter = new Intl.DateTimeFormat('en');
let example = formatter.formatToParts();
console.log(example);
}
{ // example 2
let formatter = new Intl.DateTimeFormat('hi');
let example = formatter.formatToParts();
console.log(example);
}
Better would be to map a format array to resultant strings:
function join(date, options, separator) {
function format(option) {
let formatter = new Intl.DateTimeFormat('en', option);
return formatter.format(date);
}
return options.map(format).join(separator);
}
let options = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let joined = join(new Date, options, '-');
console.log(joined);
You can also pull out the parts of a DateTimeFormat
one-by-one using
DateTimeFormat#format
,
but note that when using this method, as of March 2020, there is a
bug in the ECMAScript
implementation when it comes to leading zeros on minutes and seconds (this bug
is circumvented by the approach above).
let date = new Date(2010, 7, 5);
let year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
let month = new Intl.DateTimeFormat('en', { month: 'short' }).format(date);
let day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
console.log(`${day}-${month}-${year}`);
When working with dates and times, it is usually worth using a library (eg. luxon, date-fns, ~~moment.js~~ is not recommended for new projects) because of the many hidden complexities of the field.
Note that the ECMAScript Internationalization API, used in the solutions above is not supported in IE10 (0.03% global browser market share in Feb 2020).