오늘은 자바스크립트에서 Intl을 사용하여 날짜/시간을 포맷팅하는 방법에 대해 정리해보겠습니다.
각 국가별 날짜/시간 표기법이 다르기 때문에 국제화를 지원하는 서비스에서는 국가/언어 별로 날짜와 시간을 포맷팅 할 수 있게 도와주는 기능이 필요한데 이를 도와주는 게 Intl API 입니다.
또한 다양하게 날짜와 시간을 포맷팅 할 수 있는 기능을 제공하고 있어서 꼭 국제화를 지원하는 서비스가 아니여도 날짜와 시간을 포맷팅 할 때 자주 쓰이는 API 입니다.
자바스크립트에서는 따로 설치할 필요 없이 Intl API를 기본적으로 제공하고 있습니다. Intl API는 대부분의 모던 브라우저에서 지원되고 있으며, Node.js 에서도 사용이 가능하기 때문에 프론트엔드 뿐 아니라 백엔드에서 유용하게 사용할 수 있습니다.
Intl 로 숫자를 포맷팅 / 통화 기호를 적용하는 방법은 여기 링크를 참고해주세요!
new Intl.DateTimeFormat(locale).format(date)
여기서 locale 은 ko-KR, en-US 등 지원할 로케일(혹은 언어)을 넣어주시면 됩니다. (locale 값을 넣지 않을 경우 기본 로케일과 기본 시간대를 지원합니다.) date 의 경우 포맷팅할 날짜를 넣어주시면 되는데 타입은 Date 객체 타입입니다.
// 사용 예제 코드
const date = new Date(Date.UTC(2023, 8, 20, 9, 0, 0));
new Intl.DateTimeFormat("en-US").format(date); // 9/20/2023
new Intl.DateTimeFormat("ko-KR").format(date); // 2023. 9. 20.
상황에 따라 날짜를 연도/월/일 순서로 표기하고 싶은 경우가 있을 수 있고, 일/월/연도 순서로 표기하고 싶은 경우도 있을 거에요. 시간도 마찬가지고요. 그럴 경우 options 를 사용해서 원하는대로 포맷팅할 수 있습니다.
const date = new Date(Date.UTC(2023, 8, 20, 9, 0, 0));
new Intl.DateTimeFormat('en-US', { dateStyle: 'full', timeStyle: 'long', timeZone: 'UTC' }).format(date) // Wednesday, September 20, 2023 at 9:00:00 AM UTC
원하는 날짜 스타일대로 포맷하기 위해 DateTimeFormat 에 options 를 넣어주면 됩니다. 저는 위 기본 사용 방법에서 dateStyle 과 timeStyle, timeZone을 사용하여 종합적으로 스타일을 포맷했는데. 연, 월, 주, 일, 시, 분, 초 등을 각각 포맷할 수도 있습니다.
// 사용 예제 코드
const date = new Date(Date.UTC(2023, 8, 20, 9, 0, 0));
new Intl.DateTimeFormat('en-US', { day: '2-digit', month: 'long', weekday: 'short', hour: 'numeric' }).format(date) // Wed, September 20 at 6 PM
자세한 건 Intl 공식 문서 페이지 > Date-time component options 에 각 요소에서 사용할 수 있는 포맷팅 방식과 그를 표현하기 위한 옵션에 대한 설명이 자세히 다뤄져 있으니 참고해주세요.
추가 팁 | locale 을 넣지 않고 날짜, 시간을 포맷팅하고 싶은 경우 locale 자리에 undefined 를 넣으시면 됩니다.
(마찬가지로 locale 값을 넣지 않을 경우 기본 로케일로 브라우저 언어를 사용하여 지원합니다.)
// 사용 예제 코드
const date = new Date(Date.UTC(2023, 8, 20, 9, 0, 0));
new Intl.DateTimeFormat(undefined, { day: '2-digit', month: 'long', weekday: 'short', hour: 'numeric' }).format(date) // 9월 20일 (수) 오후 6시
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat