Published on

Define Handlebars Helper to Format Date


It is fairly common when rendering dates to want to output them in a certain String format. This is luckily fairly easy to achieve with a handlebars helper.

First, let's install moment.js to help more easily parse dates and format them using a date string:

yarn add moment

Then define the helper as follows:

const hb = require('handlebars')
const moment = require('moment')

hb.registerHelper('dateFormat', function (date, options) {
  const formatToUse =
    (arguments[1] && arguments[1].hash && arguments[1].hash.format) || 'DD/MM/YYYY'
  return moment(date).format(formatToUse)

In the above:

  • we call the helper dateFormat
  • the format is optional
    • this is achieved using the && then || expression above. This would be easier if JS had the elvis operator which would express the above as: arguments[1]?.hash?.format ?: "DD/MM/YYYY"
  • We then use moment to initialize using the provided date and parse it using the date format

This can now be used in your templates as follows:

{{dateFormat some.dateVariable format='MMMM'}}

Or leaving off format:

{{dateFormat some.dateVariable}}

As a bonus if you need a helper to get the current date (let's call it dateNow) it would be defined as:

hb.registerHelper('dateNow', () => {
  return new Date()

This is used as simply as:


And can be combined with our previous helper as follows:

{{dateFormat (dateNow) format='MMMM'}}