It is certainly possible to format dates using vanilla JavaScript, but most JavaScript developers would consider that masochism. The built-in toLocaleString() function's options syntax is limited and filled with odd quirks. Moment is the de facto choice for converting dates to neatly formatted strings in JavaScript, although some people opt out of using Moment to reduce bundle size.

Moment's format() method is what you use to convert a Moment object to a string. For example, here's how you would convert a YYYY-MM-DD string into a more human-readable format:

const moment = require ( 'moment' ); const d = new Date ( '2019/06/01' ); moment(d).format( 'MMMM d, YYYY' );

The format() function takes in a string and replaces all instances of tokens with the corresponding date value. A token is a substring like 'YYYY' or 'd' that Moment knows to replace with a part of the date, like the year or the day of the month. Below are some commonly used formatting tokens for dates:

YYYY : 4-digit year '2019'

: 4-digit year YY : 2-digit year '19'

: 2-digit year MMMM : Full-length month 'June'

: Full-length month MMM : 3 character month 'Jun'

: 3 character month MM : Month of the year, zero-padded '06'

: Month of the year, zero-padded M : Month of the year '6'

: Month of the year DD : Day of the month, zero-padded '01'

: Day of the month, zero-padded D : Day of the month '1'

: Day of the month Do : Day of the month with numeric ordinal contraction '1st'

Here's some common date formats and how to express them in Moment format strings:

'2019-06-01' : YYYY-MM-DD

: 'June 1st, 2019' : MMMM Do, YYYY

: 'June \'19' : MMMM 'YY

: '6/1/2019' : M/D/YYYY

Sometimes you want to add text to the format string that conflicts with a moment token. For example, if you want a more elaborate date like 'The 1st of June' , naively you might try the below format:

m.format( 'The Do of MMMM' );

However, you'll get a surprising output: 'T126 1st of June' . That's because both h and e are moment tokens. You can escape moment tokens using square brackets [] .

m.format( '[The] Do [of] MMMM' );

For locale-aware formatting, you can use the L and LL tokens to get a locale-specific formatting of the date.

moment.locale(); let m = moment( new Date ( '2019/06/01' )); m.format( 'L' ); m.format( 'LL' ); moment.locale( 'de' ); m = moment( new Date ( '2019/06/01' )); m.format( 'L' ); m.format( 'LL' );

Formatting Times

Moment also supports formatting times. The format() function is very flexible, so you can display just the date component, just the time component, or a combination of both. For example, here's how you can display a date's time in 2:04pm format:

const moment = require ( 'moment' ); const m = moment( new Date ( '2019/06/01 14:04:03' )); m.format( 'h:mma' );

Here's a list of commonly used time format tokens.

HH : hour of day from 0-24, zero-padded, '14'

: hour of day from 0-24, zero-padded, H : hour of day from 0-24, '14'

: hour of day from 0-24, hh : hour of day on 12-hour clock, zero-padded, '02'

: hour of day on 12-hour clock, zero-padded, h : hour of the day on 12 hour clock, '2'

: hour of the day on 12 hour clock, mm : minute, zero-padded, '04'

: minute, zero-padded, m : minute, '4'

: minute, ss : second, zero-padded

: second, zero-padded s : second

: second A : 'AM' or 'PM'

: or a : 'am' or 'pm '

Here's some common date formats and how to express them in Moment format strings:

'14:04' : HH:mm

: '14:04:03' : HH:mm:ss

: '2:04pm' : h:mma

: '2:04 PM' : h:mm A

Durations

Moment also has the concept of durations that let you humanize the difference between two times into something human-friendly like 'a minute ago' .

The moment.diff() function returns a Moment duration object that represents the difference between two moments. For example:

const moment = require ( 'moment' ); const m1 = moment( new Date ( '2019/06/01 2:04:03' )); const m2 = m1.clone().add( 59 , 'seconds' ); const duration = moment.duration(m1.diff(m2)); duration.seconds(); duration.milliseconds(); duration.humanize(); duration.humanize( true ); moment.duration(m2.diff(m1)).humanize( true );

The humanize() function takes an optional parameter suffix that, if set to true, indicates whether the duration is positive or negative ('in a minute' vs 'a minute ago'). The humanize() function is locale aware, so you can render durations in your customer's language:

const moment = require ( 'moment' ); moment.locale( 'de' ); const m1 = moment( new Date ( '2019/06/01 2:04:03' )); const m2 = m1.clone().add( 59 , 'seconds' ); const duration = moment.duration(m1.diff(m2)); console .log(duration.humanize( true ));

Moving On