투두리스트 최상단에 현재 날짜가 표시되고, 날짜를 선택할 수 있는 input을 뒀었는데
작년 12월에는 멀쩡하게 나오던 현재 날짜가 1월에 다시 들어가보니 나오지 않고 있었다...! 이유는 <input type="date"/>
는 YYYY-MM-DD
의 포맷을 인식하는데 내가 작성했던 코드가 월, 일의 자리수에 따라 YYYY-M-D
로 들어갈 수도 있는 코드였던 것. 날짜 포맷에 대한 이해가 부족했던 것 같다. 이번에 경험했으니 이제 실수는 없다🔥
이렇게 작성할 경우 2022년 12월 25일 등 월, 일의 값이 두 자리수이면 오류가 안나고 2023년 1월 3일 등 월, 일의 값이 하나라도 한 자리수이면 input이 value로 인식하지 못해 오류가 발생했다.
//예시
const todayStr = `${new Date().getFullYear()}
-${new Date().getMonth() + 1}-${new Date().getDate()}`;
// 22년 12월 12일 이라면 '2022-12-12'
// 23년 1월 1일 이라면 '2023-1-1'이라고 나오는 코드
return(
<input type="date" value={todayStr} />
)
포맷팅하는 다양한 방법이 있는데 개인적으로 가장 직관적이고 이해하기 쉬웠던 방법을 사용했다.
한 자리수
가 나올 수 있는년, 월
에 0을 붙인 후.slice(-2)
를 이용해 뒤에서부터 두 자리` 잘라내주면 끝!
//예시
const date = new Date();
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const dateStr = `${year}-${month}-${day}`;
// 어떤 날짜여도 'YYYY-DD-YY'형식으로 변환!
return(
<input type="date" value={todayStr} />
)