JavaScrpt/시간 날짜 달력

JavaScript Date - 날짜(toLocaleDateString), 시간(toLocaleTimeString)을 문자열로 변환(ISO 8601, RFC 2822)

carrotweb 2022. 3. 20. 23:15
728x90
반응형

JavaScript에서는 Date 객체를 사용하여 날짜와 시간을 문자열로 변환하여 가져오는 다양한 메서드를 제공하고 있습니다.

Date 객체 생성

날짜와 시간을 얻기 위해서는 생성자로 Date 객체를 호출합니다. 그러면 새로운 Date 객체가 반환됩니다.

var today = new Date();

 

또는 생성자에 날짜와 시간 문자열을 전달하면 내부적으로 날짜와 시간을 구문 분석하여 새로운 Date 객체가 반환됩니다.

var today = new Date(dateString);

 

dateString(날짜와 시간)은 ISO 8601과 RFC 2822로 표기된 문자열입니다.

var today = new Date("2022-03-13 15:23:37");
var today = new Date("2022-3-13 15:23:37");
var today = new Date("2022-03-13T15:23:37");
var today = new Date("2022/03/13 15:23:37");
var today = new Date("2022/3/13 15:23:37");
var today = new Date("2022. 03. 13 15:23:37");
var today = new Date("Sunday, 3/13/2022 15:23:37");
var today = new Date("Sunday, March 13, 2022 15:23:37");
var today = new Date("Sun Mar 13 2022 15:23:37");
var today = new Date("Sun, March 13, 2022 15:23:37");

년, 월, 일이 잘 못되거나 ISO 8601과 RFC 2822로 표기되지 않으면 구문 분석할 수 없기 때문에 Invalid Date가 반환됩니다.

또는 개별로 년, 월, 일, 시, 분, 초, 밀리초로 Date 객체를 호출할 수 있습니다.

new Date(year, monthIndex);
new Date(year, monthIndex, day);
new Date(year, monthIndex, day, hours);
new Date(year, monthIndex, day, hours, minutes);
new Date(year, monthIndex, day, hours, minutes, seconds);
new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds);

year는 연도를 나타내는 정수입니다. 4자리로 입력하거나 2자리로 0 ~ 99로 입력하면 1900 ~ 1999으로 처리됩니다.

monthIndex는 월을 나타내는 정수입니다. (0 ~ 11) Zero Base으로 1월은 0입니다.

day는 일을 나타내는 정수입니다. (1 ~ 31)

hours는 시를 나타내는 정수입니다. (0 ~ 23)

minutes는 분을 나타내는 정수입니다. (0 ~ 59)

seconds는 초를 나타내는 정수입니다. (0 ~ 59)

milliseconds는 밀리초를 나타내는 정수입니다. (0 ~ 999)

Date 날짜를 문자열 변환

toDateString() 메서드

toDateString() 메서드는 생성된 Date 객체에서 날짜 부분을 미국식 영어 표기법(요일 월 일 연도)으로 변환하여 가져옵니다.

console.log(today.toDateString());
--> Sun Mar 13 2022

 

 

toLocaleDateString() 메서드

toLocaleDateString() 메서드는 생성된 Date 객체에서 날짜 부분을 현재 지역 표기법으로 변환하여 가져옵니다.

toLocaleDateString() 메서드는 locales(로케일 - 언어와 국가)과 options(옵션)을 파라미터(Parameter) 전달받아 현재 지역 표기법으로 변환합니다.

toLocaleDateString();
toLocaleDateString(locales);
toLocaleDateString(locales, options);

locales과 options은 생략 가능합니다.

locales은 언어권을 설정합니다. 생략하면 현재 브라우저의 언어권을 사용합니다.

console.log(today.toLocaleDateString()); --> ko-KR
--> 2022. 3. 13.
console.log(today.toLocaleDateString("en-US"));
--> 3/13/2022

 

options은 year, month, day, weekday를 설정하여 년, 월, 일, 요일을 표기하거나 월을 지역 표기법에 맞게 문자열로 표기되게 합니다.

options에서 year가 있으면 연도를 출력, month가 있으면 월을 출력, day가 있으면 일을 출력, weekday가 있으면 요일이 출력합니다.

options의 값은 "numeric"과 "long"을 사용합니다. "numeric"은 숫자 표기, "long"은 문자 표기입니다.

연도를 변환하여 가져옵니다. year는 항상 "numeric"입니다.

var options = { year: "numeric" };
console.log(today.toLocaleDateString("en-US", options));
--> 2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년

한글권(ko-KR)에서 연도에 "년"이 추가된 것은 year가 "long"으로 기본 설정된 겁니다.

 

년, 월을 변환하여 가져옵니다.

month를 "numeric"으로 설정하면 숫자로 출력됩니다. 영어권에서는 슬래시(/)로 한글권에서는 도트(.) 처리됩니다.

var options = { year: "numeric", month: "numeric" };
console.log(today.toLocaleDateString("en-US", options));
--> 3/2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022. 3.

 

month를 "long"으로 설정하면 지역 표기법으로 출력됩니다. 영어권에서는 월이 월명으로 한글권에서는 년, 월, 일이 추가되어 처리됩니다.

var options = { year: "numeric", month: "long" };
console.log(today.toLocaleDateString("en-US", options));
--> March 2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년 3월

 

년, 월, 일을 변환하여 가져옵니다. day는 항상 "numeric"입니다.

var options = { year: "numeric", month: "numeric", day: "numeric" };
console.log(today.toLocaleDateString("en-US", options));
--> 3/13/2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022. 3. 13.

var options = { year: "numeric", month: "long", day: "numeric" };
console.log(today.toLocaleDateString("en-US", options));
--> March 13, 2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년 3월 13일

 

년, 월, 일, 요일을 변환하여 가져옵니다. weekday는 항상 "long"입니다.

var options = { year: "numeric", month: "numeric", day: "numeric", weekday: "long" };
console.log(today.toLocaleDateString("en-US", options));
--> Sunday, 3/13/2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022. 3. 13. 일요일

var options = { year: "numeric", month: "long", day: "numeric", weekday: "long" };
console.log(today.toLocaleDateString("en-US", options));
--> Sunday, March 13, 2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년 3월 13일 일요일

 

options에 timeZone이 있으면 UTC 기준으로 년, 월, 일 요일을 출력합니다.

날짜를 UTC(Universal Time Coordinated, Coordinated Universal Time - 협정 세계시)로 변경하여 변환하여 가져옵니다.

var options = { year: "numeric", month: "long", day: "numeric", weekday: "long", timeZone: "UTC" };
console.log(today.toLocaleDateString("en-US", options));
--> Sunday, March 13, 2022
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년 3월 13일 일요일

 

options에 timeZoneName이 "short"이면 UTC가 숏 네임(UTC)으로 출력되고 "long"이면 UTC가 풀 네임(Coordinated Universal Time)으로 출력됩니다.

날짜를 UTC(Universal Time Coordinated, Coordinated Universal Time - 협정 세계시)로 변경하고 타임존 명을 숏 네임으로 변환하여 가져옵니다.

var options = { year: "numeric", month: "long", day: "numeric", weekday: "long", timeZone: "UTC", timeZoneName: "short" }
console.log(today.toLocaleDateString("en-US", options));
--> Sunday, March 13, 2022, UTC
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년 3월 13일 일요일 UTC

 

날짜를 UTC(Universal Time Coordinated, Coordinated Universal Time - 협정 세계시)로 변경하고 타임존 명을 풀 네임으로 변환하여 가져옵니다.

var options = { year: "numeric", month: "long", day: "numeric", weekday: "long", timeZone: "UTC", timeZoneName: "long" };
console.log(today.toLocaleDateString("en-US", options));
--> Sunday, March 13, 2022, Coordinated Universal Time
console.log(today.toLocaleDateString("ko-KR", options));
--> 2022년 3월 13일 일요일 협정 세계시

 

 

 

Date 시간을 문자열 변환

toTimeString() 메서드

toTimeString() 메서드는 생성된 Date 객체에서 시간 부분을 그리니치 표준시(GMT - Greenwich Mean Time)로 변환하여 가져옵니다. (한국 표준시의 영문 표기는 KST입니다.)

console.log(today.toTimeString());
--> 15:23:37 GMT+0900 (한국 표준시)

 

toLocaleTimeString() 메서드

toLocaleTimeString() 메서드는 생성된 Date 객체에서 시간 부분을 현재 지역 표기법으로 변환하여 가져옵니다.

toLocaleTimeString() 메서드는 locales(로케일 - 언어와 국가)과 options(옵션)을 파라미터(Parameter) 전달받아 현재 지역 표기법으로 변환합니다.

toLocaleTimeString();
toLocaleTimeString(locales);
toLocaleTimeString(locales, options);

locales과 options은 생략 가능합니다.

locales은 언어권을 설정합니다. 생략하면 현재 브라우저의 언어권을 사용합니다.

console.log(today.toLocaleTimeString()); --> ko-KR
--> 오후 3:23:37
console.log(today.toLocaleTimeString("en-US"));
--> 3:23:37 PM

 

options은 hour, minute, second를 설정하여 시, 분, 초를 표기되게 합니다.

options에서 hour가 있으면 시간을 출력, minute가 있으면 분을 출력, second가 있으면 초를 출력합니다.

시를 변환하여 가져옵니다. hour는 항상 "numeric"입니다.

var options = { hour: "numeric" };
console.log(today.toLocaleTimeString("en-US", options));
--> 3 PM
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오후 3시

 

시, 분을 변환하여 가져옵니다. minute는 항상 "numeric"입니다.

var options = { hour: "numeric", minute: "numeric" };
console.log(today.toLocaleTimeString("en-US", options));
--> 3:23 PM
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오후 3:23

 

시, 분, 초를 변환하여 가져옵니다. second는 항상 "numeric"입니다.

var options = { hour: "numeric", minute: "numeric", second: "numeric" };
console.log(today.toLocaleTimeString("en-US", options));
--> 3:23:37 PM
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오후 3:23:37

 

시간을 24시간으로 변경하여 변환하려면 options에 hour12를 false로 설정하면 됩니다.

var options = { hour: "numeric", minute: "numeric", second: "numeric", hour12: false };
console.log(today.toLocaleTimeString("en-US", options));
--> 15:23:37
console.log(today.toLocaleTimeString("ko-KR", options));
--> 15시 23분 37초

 

시간을 2자리 숫자로 표기되게 하기 위해서는 options에 hour를 2-digit로 설정하면 됩니다.

var options = { hour: '2-digit', minute: "numeric", second: "numeric" };
console.log(today.toLocaleTimeString("en-US", options));
--> 03:03:07 PM
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오후 03:03:07

 

options에 timeZone이 있으면 UTC 기준으로 시, 분, 초 AM/PM를 출력합니다.

시간을 UTC(Universal Time Coordinated, Coordinated Universal Time - 협정 세계시)로 변경하여 변환하여 가져옵니다.

var options = { hour: '2-digit', minute: "numeric", second: "numeric", timeZone: "UTC" };
console.log(today.toLocaleTimeString("en-US", options));
--> 06:23:37 AM
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오전 06:23:37

 

options에 timeZoneName이 "short"이면 UTC가 숏 네임(UTC)으로 출력되고 "long"이면 UTC가 풀 네임(Coordinated Universal Time)으로 출력됩니다.

시간을 UTC(Universal Time Coordinated, Coordinated Universal Time - 협정 세계시)로 변경하고 타임존 명을 숏 네임으로 변환하여 가져옵니다.

var options = { hour: '2-digit', minute: "numeric", second: "numeric", timeZone: "UTC", timeZoneName: "short" };
console.log(today.toLocaleTimeString("en-US", options));
--> 06:23:37 AM UTC
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오전 06시 23분 37초 UTC

 

시간을 UTC(Universal Time Coordinated, Coordinated Universal Time - 협정 세계시)로 변경하고 타임존 명을 풀 네임으로 변환하여 가져옵니다.

var options = { hour: '2-digit', minute: "numeric", second: "numeric", timeZone: "UTC", timeZoneName: "long" };
console.log(today.toLocaleTimeString("en-US", options));
--> 06:23:37 AM Coordinated Universal Time
console.log(today.toLocaleTimeString("ko-KR", options));
--> 오전 06시 23분 37초 협정 세계시
728x90
반응형