Intl.DateTimeFormat.prototype.formatRange()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Intl.DateTimeFormat 인스턴스의 formatRange() 메서드는 이 Intl.DateTimeFormat 객체를 인스턴스화할 때 제공되는 로케일과 옵션을 기반으로 가장 간결한 방식으로 날짜 범위의 형식을 맞춥니다.

시도해보기

구문

js
formatRange(startDate, endDate)

매개변수

startDate

날짜 범위의 시작을 나타내는 Date 객체입니다.

endDate

날짜 범위의 끝을 나타내는 Date 객체입니다.

반환 값

Intl.DateTimeFormat 객체의 로케일 및 서식 옵션에 따라 형식이 맞춰진 지정된 날짜 범위를 나타내는 문자열입니다.

예제

기본적인 formatRange 사용

이 메서드는 두 개의 Date를 받아서 Intl.DateTimeFormat을 초기화 할 때 주어진 localesoptions을 기반으로 가장 간결한 방법으로 날짜 범위의 형식을 맞춥니다.

js
const date1 = new Date(Date.UTC(1906, 0, 10, 10, 0, 0)); // Wed, 10 Jan 1906 10:00:00 GMT
const date2 = new Date(Date.UTC(1906, 0, 10, 11, 0, 0)); // Wed, 10 Jan 1906 11:00:00 GMT
const date3 = new Date(Date.UTC(1906, 0, 20, 10, 0, 0)); // Sat, 20 Jan 1906 10:00:00 GMT

const fmt1 = new Intl.DateTimeFormat("en", {
  year: "2-digit",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
});
console.log(fmt1.format(date1)); // '1/10/06, 10:00 AM'
console.log(fmt1.formatRange(date1, date2)); // '1/10/06, 10:00 – 11:00 AM'
console.log(fmt1.formatRange(date1, date3)); // '1/10/06, 10:00 AM – 1/20/07, 10:00 AM'

const fmt2 = new Intl.DateTimeFormat("en", {
  year: "numeric",
  month: "short",
  day: "numeric",
});
console.log(fmt2.format(date1)); // 'Jan 10, 1906'
console.log(fmt2.formatRange(date1, date2)); // 'Jan 10, 1906'
console.log(fmt2.formatRange(date1, date3)); // 'Jan 10 – 20, 1906'

명세서

Specification
ECMAScript Internationalization API Specification
# sec-intl.datetimeformat.prototype.formatRange

브라우저 호환성

BCD tables only load in the browser

같이 보기