[Javascript] Dayjs 사용법 정리 (Date Format, 날짜 계산하기 등)

이전 포스트에서는 자바스크립트 Date 객체로 날짜 계산하는 법과 DateFormat 지정하는 법, 주의사항에 대해 정리하였다.

 

현재 프로젝트에서 Date객체를 이용하여 모든 날짜를 처리하고 계산하고 있는데, 친구가 Dayjs 라이브러리라는 것을 알려주었다. Dayjs가 어떤 라이브러리인지, 사용법에 대해 구글링 해보았더니 Date객체에 비해 훨씬 포맷팅도 쉽고 생각보다 다양한 기능을 제공하기는 것 같아 한 번 정리해보려고 한다.

 

 

1. Dayjs 라이브러리란?

Dayjs 라이브러리는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리이다. 용량도 7.1KB로 기존에 많이 사용하던 Moment.js 에 비해 훨씬 가벼운 경량 라이브러리이다.

Moment.js를 직접 사용해보진 않았지만 API 형식이 매우 유사해서 기존에 Moment.js를 사용해보았다면 쉽게 사용할 수 있다고 한다.

 

i18n

현재 약 100여 개의 다국어를 지원한다. 자세한 locale을 확인할 수 있도록 링크를 달아두었다.

 

혹시 자세한 내용과 사용법 등을 알고 싶다면 아래 공식문서를 참고하면 좋을 것 같다.

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

 

 

 

 

2. Dayjs 설치

1) JSP / HTML

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

 

2) NPM

npm install dayjs --save

 

 

 

 

3. Dayjs 사용법

1) 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")

 

dayjs 사용법 - dayjs 객체 생성

 

 

 

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

 

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

dayjs에서는 .month()나 .day() 이외에도 $M, $D 를 이용해서 동일한 날짜 정보를 받아올 수 있다.

 

Get()

let theDay = dayjs('2021-04-15')

theDay.year()	// 년: 2021
theDay.$y

theDay.month()	// 월: 3 -> 0부터 시작
theDay.$M

theDay.date()	// 일: 15
theDay.$D

theDay.day()	// 요일: 4 -> 0부터 시작(일,월,화, ...)
theDay.$d

// 분기
dayjs('2021-04-01').quarter() // 2

 

 

Set()

let theDay = dayjs('2021-04-15')

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

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

dayjs().set('year', '2023')
dayjs().set('month', '11') // December
dayjs().set('date', 25)

 

 

그 밖의 표현들

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

 

 

 

 

 

4. 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. 기본 포맷
dayjs().format()		// '2021-09-17T15:20:36+09:00'
dayjs(new Date()).format()	// '2021-09-17T15:20:36+09:00'

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

// 3. 특정 날짜 지정
//  - 날짜만 지정해줄 경우 시간은 00:00:00으로 세팅됨
let theDay = dayjs('2021-02-28').format() //  '2021-02-28T00:00:00+09:00'