和暦用datePicker

もはや和暦なんか…と思ってましたが、「住民記録システム標準仕様書」なんてものが出てるので「必要になるかも」ということで、作ってみました。
jqueryとか使わない軽量な奴です。令和は5月から、みたいな細かいところは気にしてません。
hiddenに西暦の日付を設定しておけば、表示上は和暦になり、送信データは西暦になります。

warekiPicker.html

<script src="warekiPicker.js"></script>
<form>
	<input type="text" id="warekidate1" placeholder="click here" />
	<input type="hidden" id="seirekidate1" name="formdata1" value="2020-11-01" />
	<input type="submit" value="submit" />
</form>
<style>
	.warekiPicker{background-color:white;border:solid 2px gray;border-radius:4px;padding:4px;}
	.warekiPicker .controlBox{text-align:right;}
	.warekiPicker .controlBox select,
	.warekiPicker .controlBox input{border-radius:4px;border:solid 1px gray;}
	.warekiPicker .controlBox input[type="text"],
	.warekiPicker .controlBox input[type="number"]{width:40px;margin:0;text-align:right;}
	.warekiPicker .controlBox input[type="button"]{background-color:white;}
	.warekiPicker .controlBox input[type="button"]:hover{background-color:red;}
	.warekiPicker thead{background-color:gainsboro;}
	.warekiPicker td{height:28px;text-align:right;}
	.warekiPicker td:hover{background-color:orange;}
</style>

<script>
	window.addEventListener('DOMContentLoaded',function(event){
		new initWarekiPicker('warekidate1','seirekidate1');
	},false);
</script>

warekiPicker.js

var	calDIVactive='';
function initWarekiPicker(warekiid,seirekiid)
{
	var	calDIV='';
	var	warekiNode=document.getElementById(warekiid);
	var	seirekiNode=document.getElementById(seirekiid);

	warekiNode.autocomplete="off";
	warekiNode.value=seireki_toWareki(document.getElementById(seirekiid).value);		// 和暦初期値

	warekiNode.addEventListener('focus',
		function(event){
			if(calDIVactive=='' || calDIVactive.style.display=='none'){
			}else{
				closeWarekiPicker(calDIVactive);
			}

			calDIV=showCalendar(warekiid,seirekiid);
			calDIV.style.display='block';
			calDIVactive=calDIV;
			fillCalendar(calDIV);
		},
	false);

	warekiNode.addEventListener('change',			// 直接の手入力
		function(event){
			dt=event.target.value.split(/[\-\/\s]/);
			year=wareki_toSeireki(dt[0].substr(0,1),dt[0].substr(1));
			seirekiNode.value=year+'-'+('0'+dt[1]).substr(-2,2)+'-'+('0'+dt[2]).substr(-2,2);
		},
	false);

	function seireki_toWareki(seirekidate)
	{
		dt=seirekidate.split(/[\-\/\s]/);
		if('2018'<=dt[0]){
			gengo='R';
			year=parseInt(dt[0])-2018+1;
		}else if('1989'<=dt[0]){
			gengo='H';
			year=parseInt(dt[0])-1989+1;
		}else if('1926'<=dt[0]){
			gengo='S';
			year=parseInt(dt[0])-1926+1;
		}else if('1911'<=dt[0]){
			gengo='T';
			year=parseInt(dt[0])-1911+1;
		}else if('1868'<=dt[0]){
			gengo='M';
			year=parseInt(dt[0])-1868+1;
		}else{
			gengo='K';
			year=parseInt(dt[0]);
		}
		month=parseInt(dt[1]);
		return gengo+year+'-'+month+'-'+dt[2];
	}
	function showCalendar(warekiid,seirekiid)
	{
		var	html='';
		html+='<div class="warekiPicker" style="display:none;position:absolute;width:220px;height:240px;">';
		html+='	<div class="controlBox">';
		html+='		<select id="gengo" />';
		html+='			<option value="R">令和</option>';
		html+='			<option value="H">平成</option>';
		html+='			<option value="S">昭和</option>';
		html+='			<option value="T">大正</option>';
		html+='			<option value="M">明治</option>';
		html+='			<option value="K">慶応</option>';
		html+='		</select>';
		html+='		<input type="number" id="year" />年';
		html+='		<input type="number" id="month" />月';
		html+='		<input type="button" value="×" />';
		html+='	</div>';
		html+='	<table style="width:100%;">';
		html+='	<thead>';
		html+='		<tr><th style="color:white;background-color:dimgray;">日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th style="color:white;background-color:gray;">土</th></tr>';
		html+='	</thead>';
		html+='	<tbody>';
		html+='		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		html+='		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		html+='		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		html+='		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		html+='		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		html+='		<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
		html+='	</tbody>';
		html+='	</table>';
		html+='</div>';
		calDIV=document.createElement('DIV');
		calDIV.innerHTML=html;
		calDIV=warekiNode.parentNode.insertBefore(calDIV.children[0],warekiNode.nextSibling);

		tbody=calDIV.children[1].children[1];
		for(i=0;i<tbody.children.length;i++){
			for(j=0;j<tbody.children[i].children.length;j++){
				tbody.children[i].children[j].addEventListener('click',			// 日付クリック
					function(event){
						gengo	=calDIV.children[0].children[0].value;
						year	=calDIV.children[0].children[1].value;
						month	=calDIV.children[0].children[2].value;
						warekiNode.value=gengo+year+'-'+month+'-'+event.target.innerHTML;

						year=wareki_toSeireki(gengo,year);
						seirekiNode.value=year+'-'+('0'+month).substr(-2,2)+'-'+('0'+event.target.innerHTML).substr(-2,2);
						closeWarekiPicker(calDIV);
						calDIV='';
					},
				false);
			}
		}

		if(warekiNode.value){
			dt=warekiNode.value.split(/[\-\/\s]/);
		}else{
			var date = new Date();
			dt=''+date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
			dt=seireki_toWareki(dt);
			dt=dt.split(/[\-\/\s]/);
		}
		calDIV.children[0].children[0].value=dt[0].substr(0,1);
		calDIV.children[0].children[1].value=dt[0].substr(1);
		calDIV.children[0].children[2].value=dt[1];
		for(i=0;i<3;i++){
			calDIV.children[0].children[i].addEventListener('change',		// スピンボックス
				function(event){
					warekiChanged(calDIV);
				},
			false);
		}
		calDIV.children[0].children[3].addEventListener('click',			// ×ボタン
			function(event){
				closeWarekiPicker(calDIV);
				calDIV=null;
			},
		false);
		return calDIV;
	}
	function warekiChanged(calDIV)
	{
		year	=calDIV.children[0].children[1].value;
		if(parseInt(calDIV.children[0].children[2].value)<1){
			calDIV.children[0].children[2].value=12;
			calDIV.children[0].children[1].value=parseInt(year)-1;
		}else if(12<parseInt(calDIV.children[0].children[2].value)){
			calDIV.children[0].children[2].value=1;
			calDIV.children[0].children[1].value=parseInt(year)+1;
		}
		gengo	=calDIV.children[0].children[0].value;
		year	=calDIV.children[0].children[1].value;
		month	=calDIV.children[0].children[2].value;
		fillCalendar(calDIV);
	}
	function wareki_toSeireki(gengo,year)
	{
		switch(gengo){
		case 'R':	year=parseInt(year)+2018-1;	break;
		case 'H':	year=parseInt(year)+1989-1;	break;
		case 'S':	year=parseInt(year)+1926-1;	break;
		case 'T':	year=parseInt(year)+1911-1;	break;
		case 'M':	year=parseInt(year)+1868-1;	break;
		case 'K':	year=parseInt(year);		break;
		}
		return year;
	}
	function fillCalendar(calDIV)
	{
		var date = new Date();
		y=date.getFullYear();
		m=date.getMonth()+1;
		d=date.getDate();

		gengo	=calDIV.children[0].children[0].value;
		year	=calDIV.children[0].children[1].value;
		month	=calDIV.children[0].children[2].value;
		year=wareki_toSeireki(gengo,year);
		var date = new Date(year,parseInt(month)-1,1);
		yobi=date.getDay();
		tbody=calDIV.children[1].children[1];
		r=0;
		c=0;
		n='';
		f=false;
		while(r<6 && c<7){
			if(r==0 && c<yobi){
			}else{
				if(f==false){
					if(n==''){
						n=1;
					}else{
						n++;
					}
					date = new Date(year,parseInt(month)-1,n);
					if(month-1==date.getMonth()){
					}else{
						f=true;
						n='';
					}
				}
			}
			tbody.children[r].children[c].innerHTML=n;
			if(y==year && m==month && d==n){
				tbody.children[r].children[c].style.backgroundColor='tomato';
			}else{
				tbody.children[r].children[c].style.backgroundColor='';
			}
			c++;
			if(7<=c){
				c=0;
				r++;
			}
		}
	}
	function closeWarekiPicker(calDIV)
	{
		if(calDIV && calDIV.parentNode){
		//	calDIV.style.display='none';
			calDIV.parentNode.removeChild(calDIV);
		}
	}
}