💡

[JavaScript]いい感じの生年月日フォーム

2022/02/11に公開

今回以下のような生年月日を入力するフォームを作成したので、作り方を紹介します。
日付の値はうるう年も考慮し、jsで動的に表示しています。

HTML/CSS

まずはHTMLとCSSです。こちらの説明は省きます。

HTML

<div class="form-select-wrap">
    <select class="birthday-year">
    </select>
    / 
    <select class="birthday-month">
    </select>
    /
    <select class="birthday-day">
    </select>
</div>

CSS

.form-select-wrap{
  display: flex;
  max-width: 300px;
  align-items: center;
}
.form-select-wrap > select{
  padding: 8px 16px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid gray;
  border-radius: 4px;
  font-size: 14px;
}

jsで日付を動的に制御

ここからが本題です。
まずはselect要素内に初期値のoption要素を追加していきます。

/**
 * selectのoptionタグを生成するための関数
 * @param {Element} elem 変更したいselectの要素
 * @param {Number} val 表示される文字と値
 */
function createOptionForElements(elem, val) {
  let option = document.createElement('option');
  option.text = val;
  option.value = val;
  elem.appendChild(option);
}

//年の生成
for(let i = 1920; i <= 2020; i++) {
  createOptionForElements(userBirthdayYear, i);
}
//月の生成
for(let i = 1; i <= 12; i++) {
  createOptionForElements(userBirthdayMonth, i);
}
//日の生成
for(let i = 1; i <= 31; i++) {
  createOptionForElements(userBirthdayDay, i);
}

次に年、または月が変更されたときに、動的に日付を変更していきます。

/**
 * 日付を変更する関数
 */
function changeTheDay() {
  //日付の要素を削除
  userBirthdayDay.innerHTML = '';

  //選択された年月の最終日を計算
  let lastDayOfTheMonth = new Date(userBirthdayYear.value, userBirthdayMonth.value, 0).getDate();

  //選択された年月の日付を生成
  for(let i = 1; i <= lastDayOfTheMonth; i++) {
    createOptionForElements(userBirthdayDay, i);
  }
}

userBirthdayYear.addEventListener('change', function() {
  changeTheDay();
});

userBirthdayMonth.addEventListener('change', function() {
  changeTheDay();
});

年と月が変更された時、それぞれchangeTheDay()という同じ関数を使用しています。
changeTheDay()関数の内部では、最初に日付のHTMLを空にします。

次に選択された年月から月末日を求めます。
こちらはDate()コンストラクタの中に、次の月の0番目の要素を入れることで求めることができます。

例えば、2022年2月の月末日を求めたい場合は以下のようになります。

const lastDay = new Date(2022, 2, 0).getDate();
console.log(lastDay);
//28

月は0からカウントしていくため、Date()コンストラクタの第2引数に2を入れています。

これで末日を求めることができたので、1から末日までfor文で繰り返せば日付が求まります。

js全体のコード

let userBirthdayYear = document.querySelector('.birthday-year');
let userBirthdayMonth = document.querySelector('.birthday-month');
let userBirthdayDay = document.querySelector('.birthday-day');

/**
 * selectのoptionタグを生成するための関数
 * @param {Element} elem 変更したいselectの要素
 * @param {Number} val 表示される文字と値の数値
 */
function createOptionForElements(elem, val) {
  let option = document.createElement('option');
  option.text = val;
  option.value = val;
  elem.appendChild(option);
}

//年の生成
for(let i = 1920; i <= 2020; i++) {
  createOptionForElements(userBirthdayYear, i);
}
//月の生成
for(let i = 1; i <= 12; i++) {
  createOptionForElements(userBirthdayMonth, i);
}
//日の生成
for(let i = 1; i <= 31; i++) {
  createOptionForElements(userBirthdayDay, i);
}

/**
 * 日付を変更する関数
 */
function changeTheDay() {
  //日付の要素を削除
  userBirthdayDay.innerHTML = '';

  //選択された年月の最終日を計算
  let lastDayOfTheMonth = new Date(userBirthdayYear.value, userBirthdayMonth.value, 0).getDate();

  //選択された年月の日付を生成
  for(let i = 1; i <= lastDayOfTheMonth; i++) {
    createOptionForElements(userBirthdayDay, i);
  }
}

userBirthdayYear.addEventListener('change', function() {
  changeTheDay();
});

userBirthdayMonth.addEventListener('change', function() {
  changeTheDay();
});

以上です。

Discussion