바닐라 자바스크립트로 날짜와 시간 포맷하기

저는 JavaScript에서 날짜 및 시간 기능을 관리하기 위해 수년 동안 다양한 도구를 사용해 왔습니다. 여기에서는 나만의 바닐라 JavaScript 패턴을 문서화하고 있습니다.

See Intl.DateTimeFormat() constructor for reference information beyond what is in this article.

Date.prototype.toLocaleString

toLocaleString라는 일반 메서드도 있으며 toLocaleDateString 및 toLocaleTimeString 메서드의 모든 옵션을 사용할 수 있습니다.

지원하다

CanIUse Support

const date = new Date();

const options1 = {
  month: 'short'
};

console.log(date.toLocaleString('en-US', options1));
// Aug

const options2 = {
  hour: '2-digit'
};

console.log(date.toLocaleString('en-US', options2));
// 1 PM

const dateOptions = {
  weekday: 'long',
  day: 'numeric',
  month: 'long',
  year: 'numeric'
};
const timeOptions = {
  hour12: true,
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
};

const options3 = {
  ...timeOptions, ... dateOptions
};

console.log(date.toLocaleString('en-US', options3));
// Monday, Aug 10, 2020, 1:44:27 PM

Date.prototype.toLocaleDateString

이 메서드는 출력 동작을 제어하기 위해 하나 이상의 플래그를 전달할 수 있는 로케일 및 선택적 옵션 매개변수를 허용합니다.

지원하다

CanIUse Support

const date = new Date();

console.log(date.toLocaleDateString('en-US'));
// 8/10/2020

const dateOptions1 = {
  weekday: 'long',
  day: 'numeric',
  month: 'long',
  year: 'numeric'
};

console.log(date.toLocaleDateString('en-US, dateOptions1);
// Monday, August 10, 2020

const dateOptions2 = {
  day: 'numeric',
  month: 'short'
};

console.log(date.toLocaleDateString('en-US, dateOptions2);
// Aug 10

const dateOptions3 = {
  month: 'long'
};

console.log(date.toLocaleDateString('fr-FR, dateOptions3);
// juillet

옵션

weekday : 'narrow' , 'short' , 'long'

day : 'numeric' , '2-digit'

month : 'numeric' , '2-digit' , 'narrow' , 'short' , 'long'

year : 'numeric' , '2-digit'

Date.prototype.toLocaleTimeString

이 방법은 이전toLocaleDateString 방법과 같이 로케일을 지원할 뿐만 아니라 timeZone 옵션도 지원합니다.

지원하다

CanIUse Support

const date = new Date();

console.log(date.toLocaleTimeString('en-US'));
// 1:38:27 PM

const timeOptions1 = {
  hour12: true,
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
};

console.log(date.toLocaleTimeString('en-US', timeOptions1));
// 1:38:27 PM

const timeOptions2 = {
    timeZone: 'America/Los_Angeles',
};

console.log(date.toLocaleTimeString('en-US', timeOptions2));
// 10:38:27 AM

옵션

hour12 : true , false

hour : 'numeric' , '2-digit'

minute : 'numeric' , '2-digit'

second : 'numeric' , '2-digit'