[JavaScript] 날짜/시간 포맷팅 하기 - Intl API, Intl.DateTimeFormat

dhkim 2월 14, 2023


 

 문자비교, 숫자, 시간, 날짜 비교 등의 기능을 제공하는 Intl 객체를 활용해,

이번 포스팅에서는 Intl 객체를 통한 '시간/날짜' 포맷팅 방법을 다룹니다.

타입스크립트 기반 API로 IDE에서도 입력 변수 타입을 확인 할 수 있습니다.


1. 생성자 Intl.DateTimeFormat(locales, options)

  • locales : IETF 언어태그 값 (string 혹은 string[])
  • options : 포맷팅 설정 옵션 (DateTimeFormatOptions)

1
2
3
new Intl.DateTimeFormat()
new Intl.DateTimeFormat(locales)
new Intl.DateTimeFormat(locales, options)



2. 날짜

  • 기본값 생성자 실행 시 년/월/일 출력
  • dateStyle : 'full, long, medium, short' 구분 수준에 따라 아래와 같이 출력됨.
[코드]

1
2
3
4
5
console.log(new Intl.DateTimeFormat().format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'full'     } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'long'     } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'medium'   } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'short'    } ).format(new Date()));

[결과]




3. 시간

  • timeStyle : 'full, long, medium, short' 구분 수준에 따라 아래와 같이 출력됨.
[코드]

1
2
3
4
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'full'     } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'long'     } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'   } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'short'    } ).format(new Date()));


[결과]



4. 날짜 & 시간

  • 위 옵션을 모두 명세한 경우.

[코드]

1
2
3
4
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'full'  , timeStyle: 'full'    } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'long'  , timeStyle: 'long'    } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'medium', timeStyle: 'medium'  } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { dateStyle: 'short' , timeStyle: 'short'   } ).format(new Date()));

[결과]



5. 시간 기타 설정

  • hour12 : boolean 타입으로, 12시 표현 혹은 24시 표기 여부 설정
  • hourCycle : 'h11, h12, h23, h24' 값 기준으로 정오 표현 설정
  • dayPeriod : 언어 설정 (locales)에 맞는 기간단위 약식 시간 설정

[코드]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'  , hour12: true    } ).format(new Date()));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'  , hour12: false   } ).format(new Date()));
	
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'  , hourCycle: 'h11'} ).format(new Date('2023-02-14 12:00:00')));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'  , hourCycle: 'h12'} ).format(new Date('2023-02-14 12:00:00')));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'  , hourCycle: 'h23'} ).format(new Date('2023-02-14 24:00:00')));
console.log(new Intl.DateTimeFormat( 'ko', { timeStyle: 'medium'  , hourCycle: 'h24'} ).format(new Date('2023-02-14 24:00:00')));

console.log(new Intl.DateTimeFormat( 'ko', { dayPeriod: 'narrow' } ).format(new Date('2023-02-14 9:00:00')));
console.log(new Intl.DateTimeFormat( 'ko', { dayPeriod: 'short'  } ).format(new Date('2023-02-14 13:00:00')));
console.log(new Intl.DateTimeFormat( 'ko', { dayPeriod: 'long'   } ).format(new Date('2023-02-14 23:00:00')));

[결과]



6. 날짜 / 시간 개별 설정

 위 설명과 달리 년/월/일, 시/분/초에 대한 표현을 각각 정의.

[코드]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
console.log(
	new Intl.DateTimeFormat("ko", {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		hour: 'numeric',
		minute: 'numeric',
		second:'numeric'
	}).format(new Date("2023-02-14 24:00:00"))
);

[결과]




※ 참고자료

(MDN Intl.DateTimeFormat)



0 댓글