HTML 날짜 입력의 브라우저 형식 이해하기
HTML의 <input type="date"> 요소는 사용자가 접속한 브라우저와 운영체제의 로캘(지역 설정)에 따라 서로 다른 형식으로 날짜를 표시합니다. 예를 들어 한국 환경에서는 "2024. 5. 15."처럼 보이지만, 미국 환경에서는 "05/15/2024" 형태로 나타날 수 있습니다. 따라서 자바스크립트로 날짜 값을 다룰 때는 브라우저가 내부적으로 사용하는 형식을 정확히 이해하는 것이 중요합니다.
valueAsDate 속성 활용하기
날짜 입력 요소의 값을 자바스크립트에서 다룰 때 가장 유용한 것이 바로 valueAsDate 속성입니다. 이 속성은 입력 필드의 현재 값을 Date 객체로 반환하며, 화면에 표시되는 값 역시 동일한 형식 체계를 따릅니다.
new Date().toISOString().substr( 0, 10 ); new Date().toLocaleDateString(); input.valueAsDate; input.valueAsDate.toLocaleDateString(); new Date( input.valueAsDate ); new Date( input.valueAsDate ).toISOString().substr( 0, 10 );
핵심 메서드 정리
toISOString().substr(0, 10): 현재 날짜를 ISO 8601 표준 형식("YYYY-MM-DD")의 문자열로 변환한 뒤 앞 10자리만 잘라냅니다. 날짜 입력 필드의 value 속성에는 반드시 이 형식을 사용해야 하므로, 기본값을 설정할 때 매우 유용합니다.
toLocaleDateString(): 브라우저의 로캘 설정에 맞춰 지역화된 날짜 문자열을 반환합니다. 사용자에게 익숙한 형태로 날짜를 출력해야 할 때 적합합니다.
valueAsDate: 입력 요소의 현재 값을 Date 객체로 직접 가져오거나 설정할 수 있습니다. 문자열 파싱 과정 없이 곧바로 날짜 연산을 수행할 수 있어 코드가 간결해집니다.
실무 활용 팁
날짜 입력 필드에 오늘 날짜를 기본값으로 넣고 싶다면 아래와 같이 작성할 수 있습니다.
input.value = new Date().toISOString().substr( 0, 10 );
반대로 입력된 값을 가공해 화면에 보여줄 때는 toLocaleDateString()을 사용하면 사용자의 언어·지역 설정에 맞는 자연스러운 형식으로 표시할 수 있습니다. 단, Safari 등 일부 구형 브라우저에서는 valueAsDate 지원 여부가 다를 수 있으므로, 필요하다면 input.value 문자열을 직접 파싱하는 대체 로직을 함께 준비해 두는 것이 안전합니다.