YYYY-MM-DD으로 날짜 포맷 변경하기 | JavaScript

박예선·2023년 1월 9일
1

JavaScript

목록 보기
5/6

투두리스트 최상단에 현재 날짜가 표시되고, 날짜를 선택할 수 있는 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} />
  )

'YYYY-MM-DD'로 변경하기

포맷팅하는 다양한 방법이 있는데 개인적으로 가장 직관적이고 이해하기 쉬웠던 방법을 사용했다.
한 자리수가 나올 수 있는 년, 월에 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} />
  )
profile
개발 좋아 lynn08082@gmail.com

0개의 댓글