How do I display BC/AD or other era indicators?

Introduction

Most dates you work with fall within the current era of the Gregorian calendar, which makes era indicators unnecessary. A date like "October 15, 2024" is clear without adding "AD" at the end. However, historical dates from more than two thousand years ago need era indicators to clarify whether the year falls before or after year 1.

Different cultures also use different calendar systems with their own eras. The Japanese calendar divides time into named imperial eras like Reiwa and Heisei. The Buddhist calendar counts years from Buddha's death. The Islamic calendar has its own era beginning with the Hijra.

JavaScript's Intl.DateTimeFormat provides an era option that displays these indicators. The option works with both the Gregorian calendar and other calendar systems, automatically formatting the era according to locale conventions.

Understanding eras in calendar systems

An era represents a period of time counted from a significant event or beginning point. The Gregorian calendar uses two eras: AD (Anno Domini, meaning "in the year of our Lord") for dates after year 1, and BC (Before Christ) for dates before year 1.

The era becomes important when displaying historical dates. The year 500 could refer to 500 AD or 500 BC, two dates one thousand years apart. Adding the era indicator removes this ambiguity.

Other calendar systems define eras differently. The Japanese calendar changes eras with each emperor's reign. The Buddhist calendar uses a single era beginning in 543 BC. Each calendar system has its own conventions for displaying era names.

Display era indicators in Gregorian dates

The era option accepts three values that control how the era displays. The value long shows the full era name. The value short shows an abbreviated form. The value narrow shows the most compact representation.

const date = new Date('2024-10-15');

const long = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'long'
});
console.log(long.format(date)); // "October 15, 2024 Anno Domini"

const short = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
});
console.log(short.format(date)); // "October 15, 2024 AD"

const narrow = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'narrow'
});
console.log(narrow.format(date)); // "October 15, 2024 A"

The long value produces "Anno Domini" for AD dates. The short value produces "AD". The narrow value produces just "A".

For modern dates, the era indicator is redundant because dates in the current era are assumed by default. You typically only include the era when displaying historical dates where the distinction matters.

Format BC dates with era indicators

JavaScript represents BC dates using negative year numbers or by passing negative values to the Date constructor. Year -500 represents 501 BC, year -1 represents 2 BC, and year 0 represents 1 BC.

const bcDate = new Date(-500, 0, 1); // January 1, 501 BC

const long = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'long'
});
console.log(long.format(bcDate)); // "January 1, 501 Before Christ"

const short = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
});
console.log(short.format(bcDate)); // "January 1, 501 BC"

The long value produces "Before Christ" for BC dates. The short value produces "BC". The year displays as a positive number with the era indicator showing whether it falls before or after year 1.

BC dates require careful handling because the JavaScript Date object has limitations when working with dates far in the past. Historical dates before the standardization of the Gregorian calendar in 1582 are approximations, and dates before year 1 use a calendar system that did not exist at that time.

Display eras in Japanese calendar

The Japanese calendar uses named eras that change with each emperor's reign. The current era is Reiwa, which began in 2019. The previous era was Heisei, which ran from 1989 to 2019.

You specify the Japanese calendar using the Unicode extension -u-ca-japanese in the locale identifier.

const date = new Date('2024-10-15');

const long = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'long'
});
console.log(long.format(date)); // "令和6年10月15日"

const short = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
});
console.log(short.format(date)); // "令和6年10月15日"

const narrow = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'narrow'
});
console.log(narrow.format(date)); // "R6年10月15日"

The long and short values both display "令和" (Reiwa) followed by the year within that era. The year 2024 is year 6 of the Reiwa era. The narrow value displays "R" as a compact abbreviation.

The year displayed is not the Gregorian year but the year within the current imperial era. Each era restarts counting from 1.

Display eras in Buddhist calendar

The Buddhist calendar counts years from the death of Buddha in 543 BC. The Buddhist year 2567 corresponds to the Gregorian year 2024.

You specify the Buddhist calendar using the Unicode extension -u-ca-buddhist in the locale identifier.

const date = new Date('2024-10-15');

const long = new Intl.DateTimeFormat('th-TH-u-ca-buddhist', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'long'
});
console.log(long.format(date)); // "15 ตุลาคม พุทธศักราช 2567"

const short = new Intl.DateTimeFormat('th-TH-u-ca-buddhist', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
});
console.log(short.format(date)); // "15 ตุลาคม พ.ศ. 2567"

The long value displays "พุทธศักราช" (Buddhist Era) as the full era name. The short value displays "พ.ศ." as the abbreviated form. The year 2567 represents the Buddhist calendar year corresponding to 2024 in the Gregorian calendar.

The Buddhist calendar is commonly used in Thailand, Cambodia, Laos, Myanmar, and Sri Lanka.

How era formatting varies across locales

Different locales use different terms and abbreviations for the same era. The Gregorian calendar eras appear in the language and style appropriate to each locale.

const date = new Date('2024-10-15');
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(date)); // "October 15, 2024 AD"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date)); // "15 octobre 2024 ap. J.-C."

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(date)); // "15. Oktober 2024 n. Chr."

English uses "AD" (Anno Domini). French uses "ap. J.-C." (après Jésus-Christ, meaning "after Jesus Christ"). German uses "n. Chr." (nach Christus, meaning "after Christ").

The positioning of the era indicator also follows locale conventions. English typically places it after the year, while other locales may position it differently.

const bcDate = new Date(-500, 0, 1);
const options = {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(bcDate)); // "January 1, 501 BC"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(bcDate)); // "1 janvier 501 av. J.-C."

const de = new Intl.DateTimeFormat('de-DE', options);
console.log(de.format(bcDate)); // "1. Januar 501 v. Chr."

French uses "av. J.-C." (avant Jésus-Christ, meaning "before Jesus Christ") for BC dates. German uses "v. Chr." (vor Christus, meaning "before Christ").

Common use cases

Displaying historical dates requires era indicators to avoid confusion.

const battleOfMarathon = new Date(-490, 8, 12); // September 12, 490 BC

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'short'
});

console.log(`Battle of Marathon: ${formatter.format(battleOfMarathon)}`);
// "Battle of Marathon: September 12, 490 BC"

Displaying dates in cultural contexts that use different calendar systems requires appropriate calendar and era formatting.

const date = new Date('2024-10-15');

const japaneseFormatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  era: 'long'
});

console.log(`Japanese date: ${japaneseFormatter.format(date)}`);
// "Japanese date: 令和6年10月15日"

Academic or historical writing often displays both BC and AD explicitly to maintain consistency across time periods.

const dates = [
  new Date(-2500, 0, 1), // 2501 BC
  new Date(-500, 0, 1),  // 501 BC
  new Date(500, 0, 1),   // 500 AD
  new Date(1500, 0, 1)   // 1500 AD
];

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  era: 'short'
});

dates.forEach(date => {
  console.log(formatter.format(date));
});
// "2501 BC"
// "501 BC"
// "500 AD"
// "1500 AD"

Summary

The era option in Intl.DateTimeFormat displays era indicators like AD, BC, or era names from other calendar systems. The option accepts three values: long for full era names like "Anno Domini", short for abbreviations like "AD", and narrow for the most compact form like "A".

BC dates require negative year numbers in the JavaScript Date constructor. The formatted output displays the year as a positive number with the era indicator showing whether it falls before or after year 1.

Other calendar systems have their own eras. The Japanese calendar uses named imperial eras like Reiwa. The Buddhist calendar uses a single era beginning in 543 BC. You specify the calendar system using Unicode extensions in the locale identifier.

Different locales use different terms for the same era. English uses "AD" and "BC", French uses "ap. J.-C." and "av. J.-C.", and German uses "n. Chr." and "v. Chr.". The formatter automatically applies the appropriate terms and positioning for each locale.