input type="date" に元号で入力する方法

type="date"のinputタグに元号で日付を入れたいという需要はたびたびありまして，いろいろと解決方法を探していく中で1つ方法を見つけました。

対策はいろいろと公開されていますが，どれもほしいものとちょっと違いました。

1. セレクトボックスを使う方法
   100年分とか全部optionにするのも....うーん
2. 西暦・元号をセレクトボックスにして年月日を別inputにする方法
   月日だけの入力インターフェースがないので，セレクトボックス増えちゃうし，2月31日みたいなのを選ばせないようにスクリプトを組むのも面倒....
3. 西暦で入れたあとにそれを元号で表示する方法
   そもそも元号で入力したいので，これも違う....

ということで実装です。

hoge.js

window.addEventListener('DOMContentLoaded', ()=> {
    document.getElementById('genDate').addEventListener('blur', ()=>{
        var genStr = document.getElementById('genDate').value;
        var gen = genStr.substr(0,1);
        var year = Number(genStr.substr(1,2));
        var month = genStr.substr(3,2);
        var day = genStr.substr(5,2);
        if(gen === 'M' || gen === 'm')year += 1867;
        else if(gen === 'T' || gen === 't')year += 1911;
        else if(gen === 'S' || gen === 's')year += 1925;
        else if(gen === 'H' || gen === 'h')year += 1988;
        else if(gen === 'R' || gen === 'r')year += 2018;
        document.getElementById('date').value = String(year)+'-'+month+'-'+day;
    });
});

元号入力用のテキストボックス(id:genDate)に S400502 のようにいれると，本命の日付入力ボックス(id:date)に西暦変換して埋めてくれるという方法です。
見栄えは多少悪いですが，西暦で入れたければ直接入力すればOKです。

年を変換しているだけなので，例えば R010401 とか S990501 とかも通ってしまいますが，S400231 のような実在しない日付はブラウザで弾いてくれます。