팀 프로젝트 중 type이 date인 input의 최소 범위를 지정해야하는 일이 있었다.
문제는 YYYY-MM-DD 형태로 입력해줘야 min 속성이 제대로 작동한다는 것이다.
상당히 쓰임새가 많은 형태의 데이터이기 때문에 만드는 법을 기억하면 좋을 것 같다!

input[type="date"]와 YYYY-MM-DD

필자는 머릿말에서 YYYY-MM-DD 형태로 입력해줘야한다는 말을 했다.
이는 MDN docs를 보면 쉽게 알 수 있다.

The latest date to accept. If the value entered into the element occurs afterward, the element fails constraint validation. If the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no maximum date value.
- MDN docs -

실제로 max, min 속성은 YYYY-MM-DD 형태로 입력하지 않으면 유효값이 아닌 것으로 간주한다고 한다.
또한, type이 date인 input에서 날짜를 선택하면
기본적으로는 YYYY.MM.DD의 형태로 보이지만
value를 출력해보면 YYYY-MM-DD의 형태로 출력된다.

이 또한 MDN docs에서 확인할 수 있다.

Note: The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
- MDN docs -

아무튼, 필자가 하고싶은 말은 YYYY-MM-DD가 매우 요긴하게 쓰일 것이라는 말이다 :)

YYYY-MM-DD로 날짜 데이터 만들기

사실 매우 간단하기 때문에 함수 하나로 끝난다.
오늘이 2023년 06월 18일인데, 아래 함수를 실행하면 2023-06-18의 문자열을 얻을 수 있다.

/**
 * YYYY-MM-DD 형식의 현재 날짜 데이터를 얻는 함수
 * @returns YYYY-MM-DD 형식의 현재 날짜 데이터
 */
function getDate(): string {
  const today = new Date();

  const year = today.getFullYear(); // 2023
  const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 06
  const day = today.getDate().toString().padStart(2, '0'); // 18

  const dateString = year + '-' + month + '-' + day; // 2023-06-18

  return dateString;
}

이대로 끝내긴 아쉬우니 코드에 대한 설명을 하고자 한다.

const month = (today.getMonth() + 1).toString().padStart(2, '0'); 

위 코드는 월(month)을 구하는 코드이다.
getMonth()는 1월이면 0을 출력하기 때문에 +1을 해줘야, 알기 쉬운 데이터를 얻을 수 있다.
그렇게 얻은 데이터를 string 타입으로 변환한 뒤에,
padStart()를 활용하여 한 자릿수 날짜에 대해서는 앞에 0이 붙도록 만들어준다.
이는 일(day)을 구하는 부분에서도 동일하게 적용된다.

참고 자료

input[type="date"] MDN docs
gent님 블로그