[js] Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등)

Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등)

Dayjs 라이브러리란?

Dayjs 라이브러리는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리이다.

 

1. Dayjs 라이브러리 설치방법

npm install dayjs --save

 

 

2. API 참조: i18n

100여개 이상의 다국어를 지원하고 사용하지 않은 것은 빌드에 포함되지 않는다.

100여개 이상의 다국어, 자세한 locale을 확인하는 링크

https://github.com/iamkun/dayjs/tree/dev/src/locale

GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

 

 

3. Dayjs 객체 생성

dayjs()를 이용하여 날짜를 생성하면 아래와 같이 년/월/일/요일/시간 정보 등이 담긴 dayjs 객체가 생성된다. 특정 날짜나 시간을 지정할 수도 있다.

let today1 = dayjs()
let today2 = dayjs(new Date())	// Date 객체를 dayjs로 변환

let newDay1 = dayjs("2021-01-02")
let newDay2 = dayjs("2021-07-28 12:59")

 

 

4. 날짜 정보 Get()/Set()(년/월/일/요일/시간 등)

dayjs 객체에는 년/월/일 시간 등의 정보가 담겨있다.

데이터를 가져오고(get), 변경하여 설정(set)할 수 있다.

 

Get()

Day.js 객체에서 가져온 해당 정보를 반환한다.

let theDay = dayjs('2023-02-10')

theDay.year()	// 년: 2023
theDay.month()	// 월: 1  why? -> 월은 0부터 시작
theDay.date()	// 일: 10
theDay.day()	// 요일: 5 why? -> 요일은 일요일 = 0부터 시작
theDay.quarter() // 분기: 1

 

Set()

단위를 첫 번째 인수로 받아들이고 값을 두 번째로 받아들이는 일반 setter는 적용된 변경 사항이 있는 새 인스턴스를 반환한다.

let theDay = dayjs('2022-02-10')

theDay = theDay.year('2023')	// set 년
theDay = theDay.month('5')	// set 월 - June
theDay = theDay.date('21')	// set 일

console.log(theDay.format('YYYY-MM-DD')) // 2023-06-21

dayjs().set('year', '2023') // set 년
dayjs().set('month', '11')  // set 월 - December
dayjs().set('date', 25)  // set 일

// 여러 개 한번에 하는 방법
dayjs().set('hour', 5).set('minute', 55).set('second', 15)

 

사용 가능한 모든 단위 목록

단위속기설명

단위	속기	설명
date	D	날짜
day	d	요일(일요일은 0, 토요일은 6)
month	M	월(1월은 0, 12월은 11)
year	y	년도
hour	h	시간
minute	m	분
second	s	두번째
millisecond	ms	밀리초

 

5. Date Format 설정

기존 자바스크립트 Date를 사용하면 아래와 같이 원하는 String 형태로 Date를 파싱하기 위해서는 따로 함수를 만들어 작업해주어야 한다.

// yyyy-MM-dd
dateFormatter = function(theDay) {
    let year = theDay.getFullYear()
    let month = "0" + (theDay.getMonth()+1)
    let date = "0" + theDay.getDate()

    return year+"-"+month.slice(-2)+"-"+date.slice(-2)
}

 

Dayjs 라이브러리는 dayjs().format() 메소드를 통해 쉽고 편하게 날짜와 시간을 파싱할 수 있도록 지원한다.

// 1. 기본 포맷
let todayBasic1 = dayjs().format();
let todayBasic2 = dayjs(new Date()).format();

// 2. 포맷 지정
let today1 = dayjs().format('YYYY-MM-DD');
let today2 = dayjs().format('YYYY-MM-DD 요일:ddd HH:mm:ss');
let today3 = dayjs(new Date()).format('YYYY-MM');

// 3. 특정 날짜 지정
let selectDay = dayjs('2022-02-10').format(); //'2022-02-10T00:00:00+09:00'
// 날짜만 지정해줄 경우 시간은 00:00:00이다.

 

 

그 밖의 표현들

속기	단위	설명
YY	01	Two-digit year
YYYY	2001	Four-digit year
M	1-12	Month, beginning at 1
MM	01-12	Month, 2-digits
MMM	Jan-Dec	The abbreviated month name
MMMM	January-December	The full month name
D	1-31	Day of month
DD	01-31	Day of month, 2-digits
H	0-23	Hours
HH	00-23	Hours, 2-digits
h	1-12	Hours, 12-hour clock
hh	01-12	Hours, 12-hour clock, 2-digits
m	0-59	Minutes
mm	00-59	Minutes, 2-digits
s	0-59	Seconds
ss	00-59	Seconds, 2-digits
S	0-9	Hundreds of milliseconds, 1-digit
SS	00-99	Tens of milliseconds, 2-digits
SSS	000-999	Milliseconds, 3-digits
Z	-05:00	Offset from UTC
ZZ	-0500	Compact offset from UTC, 2-digits
A	AM PM	Post or ante meridiem, upper-case
a	am pm	Post or ante meridiem, lower-case
Do	1st... 31st	Day of Month with ordinal
X	1410715640.579	Unix timestamp
x	1410715640579	Unix ms timestamp

 

 

* 공식문서 링크

https://github.com/iamkun/dayjs

GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API