How do you format relative time as yesterday or 1 day ago?

Introduction

Timestamps appear throughout modern web applications. A social media post shows "posted yesterday" while an analytics dashboard displays "1 day ago". Both describe the same time interval, but the phrasing creates different experiences. The first feels conversational and natural. The second feels precise and formal.

JavaScript provides control over this formatting choice through the Intl.RelativeTimeFormat API. You decide whether users see natural expressions like "yesterday" or numeric expressions like "1 day ago". This decision affects how formal or casual your interface feels.

The numeric option controls the format style

The numeric option in Intl.RelativeTimeFormat determines the output format. This option accepts two values.

The value auto produces natural language expressions when they exist. The value always produces numeric expressions in all cases.

const autoFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });
const alwaysFormatter = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

These two formatters produce different output for the same time values.

Use auto to show yesterday and tomorrow

Set numeric to auto when you want natural language expressions. The formatter produces "yesterday", "today", and "tomorrow" for day values of -1, 0, and 1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'auto' });

rtf.format(-1, 'day');  // "yesterday"
rtf.format(0, 'day');   // "today"
rtf.format(1, 'day');   // "tomorrow"

The formatter switches to numeric expressions when no natural equivalent exists.

rtf.format(-2, 'day');  // "2 days ago"
rtf.format(2, 'day');   // "in 2 days"

This creates a mixed style where common time references use natural language and less common ones use numbers.

Use always to show numeric values

Set numeric to always when you want consistent numeric output. The formatter produces numeric expressions for all values, including -1, 0, and 1.

const rtf = new Intl.RelativeTimeFormat('en-US', { numeric: 'always' });

rtf.format(-1, 'day');  // "1 day ago"
rtf.format(0, 'day');   // "in 0 days"
rtf.format(1, 'day');   // "in 1 day"

The value always serves as the default when you omit the numeric option.

const rtf = new Intl.RelativeTimeFormat('en-US');
rtf.format(-1, 'day');  // "1 day ago"

This default ensures consistent numeric formatting unless you explicitly choose natural expressions.

Natural time expressions exist in other languages

Languages beyond English have their own natural time expressions. French uses "hier" for yesterday, Spanish uses "ayer", and Japanese uses "昨日".

const frenchRtf = new Intl.RelativeTimeFormat('fr', { numeric: 'auto' });
frenchRtf.format(-1, 'day');  // "hier"
frenchRtf.format(1, 'day');   // "demain"

const spanishRtf = new Intl.RelativeTimeFormat('es', { numeric: 'auto' });
spanishRtf.format(-1, 'day');  // "ayer"
spanishRtf.format(1, 'day');   // "mañana"

const japaneseRtf = new Intl.RelativeTimeFormat('ja', { numeric: 'auto' });
japaneseRtf.format(-1, 'day');  // "昨日"
japaneseRtf.format(1, 'day');   // "明日"

The numeric option works across all locales. Users see natural expressions in their own language when you choose auto. They see numeric expressions in their own language when you choose always.

Choose based on your interface style

Formal interfaces benefit from numeric: 'always'. Analytics dashboards, system logs, and technical reports need precise, consistent formatting. Numeric values provide that precision across all time ranges.

Casual interfaces benefit from numeric: 'auto'. Social media feeds, messaging apps, and community forums create connection through natural language. Expressions like "yesterday" and "tomorrow" feel more human.

Consider consistency across your entire interface. Mixing both styles in different parts of the same application creates confusion. Users expect timestamps to follow the same pattern throughout their experience.

The default value of always creates the most predictable behavior. Choose auto deliberately when natural language enhances your specific interface.