Question

122

How to customize date-fns's formatRelative?

rated 0 times [ 124] [ 2] / answers: 1 / hits: 10898 / 7 Years ago, sun, november 12, 2017, 12:00:00

In moment, with calendar, I can customize how to show the time like below

moment(dateTime).calendar(null, {

    sameDay: '[Today]',

    nextDay: '[Tomorrow]',

    nextWeek: 'dddd',

    lastDay: '[Yesterday]',

    lastWeek: '[Last] dddd',

    sameElse: 'DD/MM/YYYY'

});

In date-fns, based on the formatRelative, I can provide options.

formatRelative(dateTime, Date.now(), options);

However, after reading options document, I still cannot figure out how to customize it.

Any guide will be helpful. Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyamelinad

Add To Favorites

Follow

Total Points: 339

Total Questions: 85

Total Answers: 116

Location: Marshall Islands

Member since Sun, Aug 29, 2021

3 Years ago

answered 7 Years ago chase · Accepted Answer

An update on the accepted answer: it looks like in the latest version of date-fns, the format strings look slightly different (single quotes instead of braces):

import { formatRelative } from 'date-fns';

import { de } from 'date-fns/esm/locale';



const formatRelativeLocale = {

  lastWeek: "'letzten' dddd 'um' LT",

  yesterday: "'gestern um' LT",

  today: "'heute um' LT",

  tomorrow: "'morgen um' LT",

  nextWeek: "dddd 'um' LT",

  other: 'L LT', // Difference: Add time to the date

};



const locale = {

  ...de,

  formatRelative: token => formatRelativeLocale[token],

};



const text = formatRelative(date, new Date(), { locale });

Also see this example of the format string specified in the date-fns source.