Chromeのinput[type=date]タグ内に和暦を表示する

HTML5 chrome date

HTML5でinputタグに日付入力に特化したtype="date"及び"month"が追加され、特にChromeでは標準のDatePickerが和暦をサポートしているという便利な世の中となりましたが、一方で入力後の値は依然として西暦表示のままです。

　↓

これを何とかしてinputタグ中に常時和暦を表示したいというのが今回のお題です。

ググると、「Chromeの"Shadow DOM"である"input::-webkit-datetime-edit-year-field"に対してbefore/after疑似要素を適応して…」というものがいくつかヒットしますが、残念ながら最新のChromeではShadow DOMに対する（before/after疑似要素を含む）各種セレクタは無効なようです。
https://bugs.chromium.org/p/chromium/issues/detail?id=605466

ですが、inputタグそのものに対するbefore/after疑似要素はver52.0現在でも有効かつinputタグの中にレンダリングされるので、これを使って和暦表示を追加してみます。

<style>
input.era[data-year]::before{
    content: attr(data-year);
    font-size: smaller;
    vertical-align: bottom;
    position: relative;
    top: 0.1em;
}
</style>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
(function($) {
    $.fn.date_era = function(options) {
        function _setYearAttr(e) {
            var obj = (typeof this.each == "function") ? this : $(this);
            obj.each(function() {
                var $date = $(this);
                var date = $date.val().split("-");

                var year = +date[0];
                if (year > 1988) date[0] = "H" + (year - 1988) ;
                else if (year > 1925) date[0] = "S" + (year - 1925);
                else date[0] = "";
                $date.attr({ "data-year": date[0] });
            });
        }

        _setYearAttr.call(this);
        $(this).on("change", _setYearAttr)
    };
})(jQuery);
</script>

このようなStyleSheetとJavascriptを書いておくと、

<body>
<div>
    <input type="date" class="era">
    <input type="month" class="era">
</div>

<script>
$(document).ready(function() {
    $("input.era").date_era();
});
</script>
</body>

という感じで、目的のinput[type=date|month]タグに対してdata_era()で初期化すると西暦の直前に和暦が合わせて表示されるようになります。
jQueryの.val()によるプログラムでの値変更の場合は.val("2016-07-30").trigger("change")のようにchangeイベントが発生するようにしてください。
（元号再計算はonChangeハンドラで行っており、かつ.val()による値設定はchangeイベントを発生させないため）

また、今のJavascriptは手抜きして平成"H"と昭和"S"しかサポートしてませんが、必要であれば同様の方法で判定ロジックを追加することで対応可能です。

せっかくなので、必要性が薄いスピンボタンを消去して和暦表示用の幅を確保し、かつafter疑似要素も使ってDaterPicker起動アイコンを▼からカレンダーに置換えるためのコードも追加すると、

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
input.era::-webkit-inner-spin-button{
    display: none;
}

input.era::after{
    color: #666;
    font-family: 'Material Icons';
    content: "\E916"; /* date-range */
    position: relative;
    left: -1em;
    width: 0;
    margin: 3px 0;
}
input.era::-webkit-calendar-picker-indicator{
    color: transparent;
    background-color: transparent;
    z-index: 1;
}
</style>

こんな感じになります。

　↓