現在までの和暦のセレクトボックスを出力するJS

こんなのが作れます

明治から今年までの和暦です｡

100年前から今年までの和暦です｡

元年の表記も追加したサンプルです｡

新しい年が上になるように､いわゆる降順にするサンプルです｡

ソースは検証ツールで見てほしいのですが
optionタグのvalue値は西暦にすることもできます｡

目次

• 明治から今年までの和暦
• 100年前から今年までの和暦
• 元年の表記あり
• 降順
• value値は西暦に

明治から今年までの和暦

明治から今年までの和暦を出力するコードです｡

ただしこのままだと､明治元年が「慶応4年」となってしまいます｡
そこの処理も説明していきます｡

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

<script>
//明治から今年までのセレクトボックスを出力
$(function(){
	const select = $("#select"); //セレクトボックス
	let html = ''; //挿入するHTML

	const today = new Date();
	const thisYear = today.getFullYear(); //今年

	let year = 1868; //セレクトボックスのスタート年

	//スタート年から今年までwhile
	while(year <= thisYear){
		let wareki = yearToWareki(year); //和暦を取得

		html += '<option value="'+wareki+'">'+wareki+'</option>'; //HTMLに追加
		year++;
	}

	select.append(html); //セレクトボックスに挿入
});

//西暦を和暦にする関数
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>

何年からのoptionタグを出力するのか､14行目の「year」の値を西暦で指定してください｡

その「year」の値から「今年」までをwhile文でHTMLを追加しています｡

西暦を和暦に変換する関数が28行目からのyearToWareki()関数です｡

例えば以下のようにすると「令和6年」のように返してくれるみたいです｡ 簡単ですね｡

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

参考 : 【JavaScript】西暦の年だけを用いて和暦の年を表示する方法 #JavaScript - Qiita

while(year <= thisYear){
	let wareki = yearToWareki(year); //和暦を取得

	if(wareki == "慶応4年"){ //「慶応4年」なら「明治元年」に直す
		wareki = "明治元年";
	}

	html += '<option value="'+wareki+'">'+wareki+'</option>'; //HTMLに追加
	year++;
}

const select = document.querySelector(".sample00"); //セレクトボックス

(略)

select.insertAdjacentHTML("beforeend", html); //セレクトボックスに挿入

100年前から今年までの和暦

100年前から今年までの和暦を出力するコードです｡

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

<script>
//100年前から今年までのセレクトボックスを出力
$(function(){
	const select = $("#select"); //セレクトボックス
	let html = ''; //挿入するHTML

	const today = new Date();
	const thisYear = today.getFullYear(); //今年

	let year = thisYear - 100; //セレクトボックスのスタート年

	//スタート年から今年までwhile
	while(year <= thisYear){
		let wareki = yearToWareki(year); //和暦を取得
		html += '<option value="'+wareki+'">'+wareki+'</option>'; //HTMLに追加
		year++;
	}

	select.append(html); //セレクトボックスに挿入
});

//西暦を和暦にする関数
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>

前章とほとんど同じですが､14行目の「year」に今年から100を引いた値をセットしています｡

例えば120年前からにしたい場合はこの14行目を120としてください｡

こちらもバニラなJavaScriptならセレクタとappendの部分を変える必要があります｡

こちらを参照してください｡

元年の表記あり

元年の表記も追加するコードです｡

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

<script>
//100年前から今年までのセレクトボックスを出力 (元年表記あり)
$(function(){
	const select = $("#select"); //セレクトボックス
	let html = ''; //挿入するHTML

	const today = new Date();
	const thisYear = today.getFullYear(); //今年

	let year = thisYear - 100; //セレクトボックスのスタート年

	//スタート年から今年までwhile
	while(year <= thisYear){
		let wareki = yearToWareki(year); //和暦を取得

		// ↓ 元年表記を追加 ↓
		let nextWareki = yearToWareki(year + 1); //来年の和暦を取得
		let nextWarekiMatch = nextWareki.match(/([^\d]+)2年/); //翌年が「○○2年」に一致するかどうか
		//一致するとき
		if(nextWarekiMatch){
			wareki += '／' + nextWarekiMatch[1] + '元年'; //元年の表記を追加
		}
		// ↑ 元年表記を追加 ↑

		html += '<option value="'+wareki+'">'+wareki+'</option>'; //HTMLに追加
		year++;
	}

	select.append(html); //セレクトボックスに挿入
});

//西暦を和暦にする関数
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>

基本は今までと同じですが､20～27行目で元年の表記を追加する処理を行っています｡

先述したIntl.DateTimeFormat()は､例えば2019年の令和元年の場合「平成31年」と返すようです｡

そこで､while文の中で一旦翌年の和暦を取得し､それが「○○2年」と一致する場合は「／(翌年)元年」となるように追記しています｡

こちらもバニラなJavaScriptならセレクタとappendの部分を変える必要があります｡

こちらを参照してください｡

降順

新しい年が上になるように､いわゆる降順にするコードです｡

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

<script>
//100年前から今年までのセレクトボックスを出力 (降順)
$(function(){
	const select = $("#select"); //セレクトボックス
	let html = ''; //挿入するHTML

	const today = new Date();
	let thisYear = today.getFullYear(); //今年

	let year = thisYear - 100; //セレクトボックスのスタート年

	//スタート年から今年までwhile
	while(thisYear >= year){
		let wareki = yearToWareki(thisYear); //和暦を取得
		html += '<option value="'+wareki+'">'+wareki+'</option>'; //HTMLに追加
		thisYear--;
	}

	select.append(html); //セレクトボックスに挿入
});

//西暦を和暦にする関数
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>

while文で「year」を増やしていくのではなく「thisYear」を減らしていきながらHTMLを追加しています｡

こちらもバニラなJavaScriptならセレクタとappendの部分を変える必要があります｡

こちらを参照してください｡

value値は西暦に

optionタグのvalue値は西暦にするコードです｡ 実際のソースは検証ツールで確認してください｡

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

<script>
//100年前から今年までのセレクトボックスを出力 (value値は西暦)
$(function(){
	const select = $("#select"); //セレクトボックス
	let html = ''; //挿入するHTML

	const today = new Date();
	const thisYear = today.getFullYear(); //今年

	let year = thisYear - 100; //セレクトボックスのスタート年

	//スタート年から今年までwhile
	while(year <= thisYear){
		let wareki = yearToWareki(year); //和暦を取得
		html += '<option value="'+year+'">'+wareki+'</option>'; //HTMLに追加
		year++;
	}

	select.append(html); //セレクトボックスに挿入
});

//西暦を和暦にする関数
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>

これもほとんど今までの応用で､19行目でoptionのvalue値に西暦が入るようにしています｡

こちらもバニラなJavaScriptならセレクタとappendの部分を変える必要があります｡

こちらを参照してください｡

コメント

「できました！」などの報告もお待ちしております｡