[React/js] 날짜(월,일)을 01~31의 형태로 출력해보자.

왜?

날짜 데이터를 이용할 때 어떤 변수에 Date 를 선언해둔 뒤 getFullYear, getMonth, getDate 등을 이용하여 잘라서 간단하게 가져오고는 한다.

하지만 이렇게 사용하면 Month는 1~12의 형태로 출력이 되고, Date의 경우에는 1~31의 값을 출력해주게 된다.

보통 조회 조건을 설정할 때에는 yyyy-MM-dd 형태를 사용하게 되는데 말이다..

기존

문제가 되는 사항은 아닌데 이런 로그가 자꾸 발생하게 된다.

The specified value "2023-1-3" does not confirm to the required format, "yyyy-MM-dd"

대충 노란색인 것을 보자하니 알아서 변환해서 적용하고 있는 건가 싶기는 하지만
눈에 거슬리므로 해결해보도록 하자.

기존 코드에서는

let date = new Date();

.
.
.

document.getElementById('searchdate').value = 
  (today.getFullYear()) + "-" 
  + (today.getMonth()+1) + "-" 
  + today.getDate();

이렇게 searchdate 값을 적용해주고 있었다.

내가 한참 개발하던 때는.. 10~12월이라 이런 메세지를 전혀 볼 수 없었고
기본값 바인딩에서만 이 코드를 사용하고 있어 1월이 된 지금에야나 문제를 발견할 수 있었던 것

개선

let date = new Date();

.
.
.

document.getElementById('searchdate').value = 
  (today.getFullYear()) + "-" 
  + ("00"+(today.getMonth()+1).toString()).slice(-2) + "-" 
  + ("00"+(today.getDate().toString())).slice(-2);

getFullYear 에는 문제가 발생하지 않으므로 그대로 두고
getMonth 나 getDate 의 경우 00을 붙힌 다음에 뒤의 두개만 잘라서 쓰겠다 라고 해줬다.
그러면 한자리 수의 경우에는 빈공간에 0이 붙어서 나올 것이고, 두자리 수는 그대로 출력이 된다.