input type=dateで和暦（元号＋年）を表示する工夫

何なの？

すみません。

利用者の登録用紙みたいなのがあって、生年月日を西暦で書いてって誘導があるのにもかかわらず、どういうわけか和暦で書いてあるものが混在している場合、その登録のたびに「えーと昭和YY年って西暦何年だっけ？」と西暦と和暦の変換のために、入力のテンポが悪くなることありませんか？

「○○年引けばいいじゃん」
「○○年足せばいいじゃん」

確かにそうなんですけど、日常をぼんやりと過ごしていたら、その「○○年」もぼんやりとしてきて、結局何年だったか自信がなくなってググっている私がいました。

もうイヤなんです。
もう疲れたんです。
なので、入力コントロールに表示させればいいじゃんというわけなんですが。

こんなのありました。発想がしゅごい。Chrome限定。見た目んー。

http://d.hatena.ne.jp/chi-bd/20160730/1469883831
Chromeのinput[type=date]タグ内に和暦を表示する - Null and void

こんなのもありました。機能の割りに実装が大変そう。jQuery UIかー。

http://pedal-blog.2-d.jp/datepicker-wareki/
DatePickerの西暦を和暦で表示する方法 - Pedal Blog

で、JavaScriptでDateのtoLocaleDateString()を使って何かできないかと模索した結果がこちらです。

実装

主に楽するために jQuery, Moment.js ,bootstrap3, font-awesome を使っています。

HTML

<div class="form-group col-xs-12 col-sm-6">
  <label for="dateOfBirth" class="control-label">生年月日</label>
  <div class="input-group">
    <div class="input-group-addon">
      <i class="fa fa-calendar" aria-hidden="true"></i> <span class="jy" aria-hidden="true">元号XX年</span>
    </div>
    <input type="date" name="dateOfBirth" id="dateOfBirth" class="form-control" max="" title="入力してください。">
  </div>
</div>

JS

$('#dateOfBirth').change(function() {
  var $dob = $(this);
  var d = moment($dob.val()).toDate();
  var jy = '元号XX年';
  if (d.toString() !== "Invalid Date") {
    jy = d.toLocaleDateString('ja-JP-u-ca-japanese', {
      year: 'numeric'
    });
  }
  $dob.prev().find('span.jy').text(jy);
});

実行結果

で？

すみません。