💡
[JavaScript]いい感じの生年月日フォーム
今回以下のような生年月日を入力するフォームを作成したので、作り方を紹介します。
日付の値はうるう年も考慮し、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