JS to output a Japanese calendar year select box up to the current year

What you can create with this

Japanese calendar years from Meiji to the current year.

Japanese calendar years from 100 years ago to the current year.

A sample with the "Gannen" (first year) notation added.

A sample that arranges years in descending order, with the newest year at the top.

Please check the source code with the developer tools.
The value attribute of the option tag can also be set to the Gregorian year.

Table of Contents

• Japanese calendar years from Meiji to the current year
• Japanese calendar years from 100 years ago to the current year
• With Gannen (first year) notation
• Descending order
• value attribute as Gregorian year

Japanese calendar years from Meiji to the current year

This is the code to output Japanese calendar years from Meiji to the current year.

However, as is, the first year of Meiji will be displayed as "Keio 4".
I will explain how to handle that.

<select id="select">
	<option selected disabled>選択してください</option>
</select>

<script>
// Output select box for Japanese calendar years from Meiji to the current year
$(function(){
	const select = $("#select"); // Select box
	let html = ''; // HTML to insert

	const today = new Date();
	const thisYear = today.getFullYear(); // Current year

	let year = 1868; // Start year for the select box

	// Loop from start year to current year
	while(year <= thisYear){
		let wareki = yearToWareki(year); // Get Japanese calendar year

		html += '<option value="'+wareki+'">'+wareki+'</option>'; // Add to HTML
		year++;
	}

	select.append(html); // Insert into select box
});

// Function to convert Gregorian year to Japanese calendar year
function yearToWareki(year){
	let m = new Date(year, 0, 1); // e.g. "2022-01-01"
	let dt = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {year: 'numeric'});  
	let str = dt.format(m);
	return str; // e.g. "令和4年"
}
</script>

Please specify the starting year for the option tags by setting the "year" value on line 14 in Gregorian calendar format.

HTML is added using a while loop from the "year" value to the "current year".

The function that converts the Gregorian year to the Japanese calendar year is the yearToWareki() function starting from line 28.

For example, if you do it like this, it seems to return "Reiwa 6". It's simple, isn't it?

new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era: 'short', year: 'numeric'}).format(2024-01-01)

Reference : 【JavaScript】How to display Japanese calendar years using only Gregorian years #JavaScript - Qiita

while(year <= thisYear){
	let wareki = yearToWareki(year); // Get Japanese calendar year

	if(wareki == "慶応4年"){ // If "Keio 4", correct to "Meiji Gannen"
		wareki = "明治元年";
	}

	html += '<option value="'+wareki+'">'+wareki+'</option>'; // Add to HTML
	year++;
}

const select = document.querySelector(".sample00"); // Select box

(Omitted)

select.insertAdjacentHTML("beforeend", html); // Insert into select box

Japanese calendar years from 100 years ago to the current year

This is the code to output Japanese calendar years from 100 years ago to the current year.

<select id="select">
	<option selected disabled>選択してください</option>
</select>

<script>
// Output select box for Japanese calendar years from 100 years ago to the current year
$(function(){
	const select = $("#select"); // Select box
	let html = ''; // HTML to insert

	const today = new Date();
	const thisYear = today.getFullYear(); // Current year

	let year = thisYear - 100; // Start year for the select box

	// Loop from start year to current year
	while(year <= thisYear){
		let wareki = yearToWareki(year); // Get Japanese calendar year
		html += '<option value="'+wareki+'">'+wareki+'</option>'; // Add to HTML
		year++;
	}

	select.append(html); // Insert into select box
});

// Function to convert Gregorian year to Japanese calendar year
function yearToWareki(year){
	let m = new Date(year, 0, 1); // e.g. "2022-01-01"
	let dt = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {year: 'numeric'});  
	let str = dt.format(m);
	return str; // e.g. "令和4年"
}
</script>

It's almost the same as the previous chapter, but the "year" on line 14 is set to the current year minus 100.

For example, if you want to start from 120 years ago, set line 14 to 120.

Similarly, if it's vanilla JavaScript, you need to change the selector and append parts.

Refer here.

With Gannen (first year) notation

This is the code to add the "Gannen" (first year) notation.

<select id="select">
	<option selected disabled>選択してください</option>
</select>

<script>
// Output select box for Japanese calendar years from 100 years ago to the current year (with Gannen notation)
$(function(){
	const select = $("#select"); // Select box
	let html = ''; // HTML to insert

	const today = new Date();
	const thisYear = today.getFullYear(); // Current year

	let year = thisYear - 100; // Start year for the select box

	// Loop from start year to current year
	while(year <= thisYear){
		let wareki = yearToWareki(year); // Get Japanese calendar year

		// ↓ Add Gannen notation ↓
		let nextWareki = yearToWareki(year + 1); // Get next year's Japanese calendar year
		let nextWarekiMatch = nextWareki.match(/([^\d]+)2年/); // Check if the next year matches "○○ 2nd year"
		// When it matches
		if(nextWarekiMatch){
			wareki += '／' + nextWarekiMatch[1] + '元年'; // Add Gannen notation
		}
		// ↑ Add Gannen notation ↑

		html += '<option value="'+wareki+'">'+wareki+'</option>'; // Add to HTML
		year++;
	}

	select.append(html); // Insert into select box
});

// Function to convert Gregorian year to Japanese calendar year
function yearToWareki(year){
	let m = new Date(year, 0, 1); // e.g. "2022-01-01"
	let dt = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {year: 'numeric'});  
	let str = dt.format(m);
	return str; // e.g. "令和4年"
}
</script>

The basic structure is the same as before, but lines 20-27 handle adding the "Gannen" (first year) notation.

The aforementioned Intl.DateTimeFormat() seems to return "Heisei 31" for Reiwa Gannen (the first year of Reiwa) in 2019, for example.

Therefore, within the while loop, we first get the Japanese calendar year for the next year, and if it matches "○○ 2nd year", we append "／(next year) Gannen".

Similarly, if it's vanilla JavaScript, you need to change the selector and append parts.

Refer here.

Descending order

This is the code to arrange years in descending order, with the newest year at the top.

<select id="select">
	<option selected disabled>選択してください</option>
</select>

<script>
// Output select box for Japanese calendar years from 100 years ago to the current year (descending order)
$(function(){
	const select = $("#select"); // Select box
	let html = ''; // HTML to insert

	const today = new Date();
	let thisYear = today.getFullYear(); // Current year

	let year = thisYear - 100; // Start year for the select box

	// Loop from start year to current year
	while(thisYear >= year){
		let wareki = yearToWareki(thisYear); // Get Japanese calendar year
		html += '<option value="'+wareki+'">'+wareki+'</option>'; // Add to HTML
		thisYear--;
	}

	select.append(html); // Insert into select box
});

// Function to convert Gregorian year to Japanese calendar year
function yearToWareki(year){
	let m = new Date(year, 0, 1); // e.g. "2022-01-01"
	let dt = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {year: 'numeric'});  
	let str = dt.format(m);
	return str; // e.g. "令和4年"
}
</script>

Instead of incrementing "year" in the while loop, HTML is added while decrementing "thisYear".

Similarly, if it's vanilla JavaScript, you need to change the selector and append parts.

Refer here.

value attribute as Gregorian year

This is the code to set the value attribute of the option tag to the Gregorian year. Please check the actual source code with the developer tools.

<select id="select">
	<option selected disabled>選択してください</option>
</select>

<script>
// Output select box for Japanese calendar years from 100 years ago to the current year (value attribute as Gregorian year)
$(function(){
	const select = $("#select"); // Select box
	let html = ''; // HTML to insert

	const today = new Date();
	const thisYear = today.getFullYear(); // Current year

	let year = thisYear - 100; // Start year for the select box

	// Loop from start year to current year
	while(year <= thisYear){
		let wareki = yearToWareki(year); // Get Japanese calendar year
		html += '<option value="'+year+'">'+wareki+'</option>'; // Add to HTML
		year++;
	}

	select.append(html); // Insert into select box
});

// Function to convert Gregorian year to Japanese calendar year
function yearToWareki(year){
	let m = new Date(year, 0, 1); // e.g. "2022-01-01"
	let dt = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {year: 'numeric'});  
	let str = dt.format(m);
	return str; // e.g. "令和4年"
}
</script>

This is also mostly an application of what we've done so far, with line 19 ensuring that the Gregorian year is entered into the option's value attribute.

Similarly, if it's vanilla JavaScript, you need to change the selector and append parts.

Refer here.

Comments

We also welcome reports such as "It worked!".