기존에 사용하던 input 과 똑같이 사용하고 type 만 date 로 바꾸어주면 달력 입력이 가능해진다.
하지만 출력시 나는 예를 들어

2024년 1월 29일

이런식으로 출력하고 싶었으나

2024-1-29

기본적으로는 이렇게 출력이 된다.
강의를 보면서 하나 알게 되었다.

toLocaleDateString

바로 .toLocaleDateString() 메서드를 이용하면 되겠다.
무슨 뜻인가 했더니

to(~로 만든다) + Locale(지역) + Date(날짜) + String(문자열) = 접속 지역의 날짜 값을 가진 문자열로 만든다.

이처럼 확인 가능 했다.
기본적인 문법으로는

dateObject.toLocaleDateString([locales[, options]])

이렇게 작성이 가능하고 options을 넣어 날짜 포맷을 할수 있겠다.

• year : 연도의 표현 방식 (numeric, 2-digit)
• month : 월의 표현 방식 (numeric, 2-digit, long, short, narrow)
• day: 일의 표현 방식 (numeric, 2-digit)
• weekday: 요일의 표현 방식 (long, short, narrow)

const formattedDeadLind = new Date(completed.deadline).toLocaleDateString(
    "ko-KR",
    {
      year: "numeric",
      month: "long",
      day: "numeric",
      weekday: "long",
    }
  );

바로 적용해 봤다. 아 그리고 언어는 한국에서 사용할시 "ko-KR"만 붙여 주면 된다.
깔끔하게 잘나온다.

마무리

처음에는 뭐 placeholder 같은거 사용해서 바꿔주면 되지 않겠어?
라고 너무 쉽게 생각한거 같았다. 막상 바꿔보려고 해보니 전혀 바뀌지가 않아서 당황 했던거 같다. 고작 표현 방식을 바꾸는 것 치고는 어려운 방식이라고 생각한다.