[React]生年月日入力欄を作成
import React, { useRef, useState, useEffect } from "react";
export const SignUp = () => {
const birthYearRef = useRef(null);
const birthMonthRef = useRef(null);
const birthDayRef = useRef(null);
const [age, setAge] = useState(''); // birthYaer, Month, Dayをまとめたもの
const [birthYear, setBirthYear] = useState(new Date().getFullYear());
const [birthMonth, setBirthMonth] = useState(new Date().getMonth() + 1);
const [birthDay, setBirthDay] = useState(new Date().getDay());
const selectBirthYear = (e) => {
setBirthYear(e.target.value);
setAge(`${birthYear}_${birthMonth}_${birthDay}`);
}
const selectBirthMonth = (e) => {
setBirthMonth(e.target.value);
setAge(`${birthYear}_${birthMonth}_${birthDay}`);
}
const selectBirthDay = (e) => {
setBirthDay(e.target.value);
setAge(`${birthYear}_${birthMonth}_${birthDay}`);
}
// 生年月日入力欄生成
const setYear = () => {
// 年を生成
for(let i = 1900; i <= new Date().getFullYear(); i++){
let op = document.createElement('option');
op.value = i;
op.text = i;
if (birthYearRef.current) birthYearRef.current.appendChild(op);
}
birthYearRef.current.value = birthYear;
}
const setMonth = () => {
// 月を生成
for(let i = 1; i <= 12; i++){
let op = document.createElement('option');
op.value = i;
op.text = i;
if (birthMonthRef.current) birthMonthRef.current.appendChild(op);
}
if (birthMonthRef.current) birthMonthRef.current.value = birthMonth;
}
const setDay = () => {
//日を空にする
let children;
if (birthDayRef.current) children = birthDayRef.current.children;
while (children.length) {
children[0].remove();
}
// 日を生成
if(birthYearRef.current && birthYearRef.current.value !== '' && birthMonthRef.current && birthMonthRef.value !== ''){
const lastday = new Date(Number(birthYearRef.current.value), Number(birthMonthRef.current.value), 0).getDate();
for (let i = 1; i <= lastday; i++) {
let op = document.createElement('option');
op.value = i;
op.text = i;
birthDayRef.current.appendChild(op);
}
birthDayRef.current.value = birthDay;
}
}
useEffect(() => {
setYear();
setMonth();
setDay();
}, []);
useEffect(() => {
setDay();
}, [birthYear, birthMonth]);
return (
<div className={classes.column}>
<p className={classes.plate}>生年月日</p>
<select ref={birthYearRef} value={birthYear} onChange={selectBirthYear} id="birth-year" name="year"></select>年
<select ref={birthMonthRef} value={birthMonth} onChange={selectBirthMonth} id="birth-month" name="month"></select>月
<select ref={birthDayRef} value={birthDay} onChange={selectBirthDay} id="birth-day" name="day"></select>日
</div>
);
}
このuseEffectによって年、月が変更された時に日付を計算し直す
useEffect(() => {
setDay();
}, [birthYear, birthMonth]);
上の記事を参考にしました。
この記事が気に入ったらサポートをしてみませんか?