🎂

(日本の)生年月日入力の実装を考える

2022/07/17に公開

はじめに

個人情報としての扱いや、占いなどに使用していたりと様々な箇所で記述を目にします。
生年月日から年齢、干支、12星座が計算できたりします。
入力についてはドロップダウンリストやテキストボックスなど様々なやり方で実装されています。

生年月日と誕生日のニュアンスの違い

生年月日は特定の一日を差し、誕生日は毎年訪れる誕生の記念日という違いです。
なので、データとして永続化する際は 生年月日 として保存します。

生年月日の仕様

生年月日には下記のような記載方法が想定される

1988/02/03
19880203
昭和63年02月03日
昭和63年 2月 3日

ユーザーの入力では、

  • リストとテキストの混在
  • リストのみ
  • テキストのみ

を見たことがある。

ユーザーの入力について考える

  • 西暦は盛りに盛って1900年以降である
    • 和暦は元号と年の組み合わせとなる
      • 西暦がわかれば和暦は算出できる
  • 月は1〜12である
  • 日は1〜最大31である
    • 四年に1度、2月29日が存在する(閏年)
  • リストとテキストを混在すると手間が増える
<fieldset>
  <label>生年月日</label>
    <input type="number" name="year" id="year" size="8" maxlength="4"><input type="number" name="month" id="month" size="4" maxlength="2"><input type="number" name="day" id="day" size="4" maxlength="2"></fieldset>

オーソドックスな4桁、2桁、2桁のテキストボックスが現実的ではないでしょうか。

クライアントサイドの追加仕様

  • 必須入力とした時、どこかのタイミングで必須チェックを行う
  • パディングを行う
  • 4桁の数値か&2桁の数値か&2桁の数値かの文字列チェックを行う
  • 存在している日付かチェックを行う
  • 生年月日を全て入力した後、現在日と比較し年齢を算出する
  • 生年月日を全て入力した後、和暦を算出する
  • SPの場合、キーボード入力はデフォルト数字入力とする
  • 4桁入力後、2桁の入力欄に自動でカーソルを移動する

サーバーサイドの追加仕様

  • 必須入力とした時、必須チェックを行う。
  • 4桁の数値か&2桁の数値か&2桁の数値かの文字列チェックを行う。
  • 存在している日付かチェックを行う。

Discussion