day.js 사용 방법 - JavaScript 날짜 라이브러리

day.js 사용 방법 - JavaScript 날짜 라이브러리

 

day.js 는 많은 JavaScript 날짜 관련 라이브러리중 가장 가벼운 라이브러리입니다.

업데이트가 중단된 moment.js 보다 약 33배 가벼우며, immutable 한 구조라서 굉장히 많이 사용되고 있는 라이브러리 입니다.

또한 moment.js 와 문법이 비슷하여서 moment.js 대체로 굉장히 많이 사용되고 있습니다.

 

그럼 day.js의 사용방법에 대해 알려드리도록 하겠습니다.

 

day.js 사용 준비

Module 설치하여 사용 하는 경우

npm install dayjs

npm을 사용하여 day.js 를 설치하여 사용합니다.

 

import dayjs from "dayjs";

day.js를 설치하였으면 위와 같이 import 하여 사용합니다.

혹은,

const dayjs = require("dayjs");

require 하여 사용할수도 있습니다.

 

CDN 사용 하는 경우

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>

CDN을 사용하여 day.js를 가져오고 사용할 수도 있습니다.

2021년 10월 10일 기준 1.10.7 버전이 최신 버전입니다.

최신 버전이 업데이트 됐으면 최신버전을 사용하세요.

 

day.js 사용 방법

day.js에서 많이 사용하는 함수들에 대해서 사용방법을 간단하게 알려드리도록 하겠습니다.

 

현재 날짜 및 시간 객체 생성 - dayjs()

var now = dayjs();
now.format();

dayjs() 함수를 사용해 현재 날짜와 시간 객체를 생성할 수 있습니다.

 

날짜 및 시간 지정 객체 생성 - dayjs()

var date = dayjs("2021-10-10");
date.format(); // 2021-10-09T00:00:00+09:00
var date = dayjs("2021.10.10", "YYYY.MM.DD");
date.format(); // 2021-10-09T00:00:00+09:00
var date = dayjs("10/10/21", "MM/DD/YY");
date.format(); // 2021-10-09T00:00:00+09:00
var date = dayjs("2021-10-10 10:30:25", "YYYY-MM-DD HH:mm:ss");
date.format(); // 2021-10-09T10:30:25+09:00

dayjs() 함수를 사용해 원하는 날짜 및 시간을 입력하여 객체를 생성할 수 있습니다.

 

포맷 지정 - format()

var date = dayjs("2021-10-11 10:30:25", "YYYY-MM-DD HH:mm:ss");

date.format(); // 2021-10-11T10:30:25+09:00
date.format("YY-MM-DD"); // 21-10-11
date.format("DD/MM/YY"); // 11/10/21
date.format("YYYY.MM.DD HH:mm:ss"); // 2021.10.11 10:30:25

format() 함수를 사용하여 원하는 형태를 입력하고 원하는 형태의 문자열로 변경할 수 있습니다.

 

날짜 객체의 원하는 시간 단위 값 구하기 - get()

var now = dayjs();

now.format(); // 2021-10-10T19:03:02+09:00

now.get("year"); // 2021 (년)
now.get("y"); // 2021 (년)

now.get("month"); // 9 (월 - 0~11)
now.get("M"); // 9 (월 - 0~11)

now.get("date"); // 10 (일)
now.get("D"); // 10 (일)

now.get("day"); // 0 (요일 - 일요일 : 0, 토요일 : 6)
now.get("d"); // 0 (요일 - 일요일 : 0, 토요일 : 6)

now.get("hour"); // 19 (시)
now.get("h"); // 19 (시)

now.get("minute"); // 3 (분)
now.get("m"); // 3 (분)

now.get("second"); // 2 (초)
now.get("s"); // 2 (초)

now.get("millisecond"); // 179 (밀리초)
now.get("ms"); // 179 (밀리초)

get() 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값을 구할 수 있습니다.

 

날짜 객체의 원하는 시간 단위 값 변경 - set()

var date = dayjs("2021-10-10 10:30:25");

date.format(); // 2021-10-10T10:30:25+09:00

date.set("year", 2022).format(); // 2022-10-10T10:30:25+09:00
date.set("y", 2022).format(); // 2022-10-10T10:30:25+09:00

date.set("month", 11).format(); // 2021-12-10T10:30:25+09:00
date.set("M", 11).format(); // 2021-12-10T10:30:25+09:00

date.set("date", 25).format(); // 2021-10-25T10:30:25+09:00
date.set("D", 25).format(); // 2021-10-25T10:30:25+09:00

date.set("day", 5).format(); // 2021-10-15T10:30:25+09:00
date.set("day", 5).format("dddd"); // Friday
date.set("d", 5).format(); // 2021-10-15T10:30:25+09:00
date.set("d", 5).format("dddd"); // Friday

date.set("hour", 15).format(); // 2021-10-10T15:30:25+09:00
date.set("h", 15).format(); // 2021-10-10T15:30:25+09:00

date.set("minute", 45).format(); // 2021-10-10T10:45:25+09:00
date.set("m", 45).format(); // 2021-10-10T10:45:25+09:00

date.set("second", 10).format(); // 2021-10-10T10:30:10+09:00
date.set("s", 10).format(); // 2021-10-10T10:30:10+09:00

date.set("millisecond", 500).format("SSS"); // 500
date.set("ms", 500).format("SSS"); // 500

 

set() 함수를 사용하여 날짜 객체에서 원하는 시간 단위의 값을 변경할 수 있습니다.

 

날짜 객체에서 지정 시간 단위의 시작, 마지막으로 설정 - startOf() / endOf()

dayjs("2021-10-09 10:30:25").format(); // 2021-10-09T10:30:25+09:00

dayjs("2021-10-09 10:30:25").startOf("year").format(); // 2021-01-01T00:00:00+09:00
dayjs("2021-10-09 10:30:25").startOf("y").format(); // 2021-01-01T00:00:00+09:00
dayjs("2021-10-09 10:30:25").endOf("year").format(); // 2021-12-31T23:59:59+09:00
dayjs("2021-10-09 10:30:25").endOf("y").format(); // 2021-12-31T23:59:59+09:00

dayjs("2021-10-09 10:30:25").startOf("month").format(); // 2021-10-01T00:00:00+09:00
dayjs("2021-10-09 10:30:25").startOf("M").format(); // 2021-10-01T00:00:00+09:00
dayjs("2021-10-09 10:30:25").endOf("month").format(); // 2021-10-31T23:59:59+09:00
dayjs("2021-10-09 10:30:25").endOf("M").format(); // 2021-10-31T23:59:59+09:00

dayjs("2021-10-09 10:30:25").startOf("date").format(); // 2021-10-09T00:00:00+09:00
dayjs("2021-10-09 10:30:25").startOf("D").format(); // 2021-10-09T00:00:00+09:00
dayjs("2021-10-09 10:30:25").startOf("day").format(); // 2021-10-09T00:00:00+09:00
dayjs("2021-10-09 10:30:25").startOf("d").format(); // 2021-10-09T00:00:00+09:00
dayjs("2021-10-09 10:30:25").endOf("date").format(); // 2021-10-09T23:59:59+09:00
dayjs("2021-10-09 10:30:25").endOf("D").format(); // 2021-10-09T23:59:59+09:00
dayjs("2021-10-09 10:30:25").endOf("day").format(); // 2021-10-09T23:59:59+09:00
dayjs("2021-10-09 10:30:25").endOf("d").format(); // 2021-10-09T23:59:59+09:00

dayjs("2021-10-09 10:30:25").startOf("hour").format(); // 2021-10-09T10:00:00+09:00
dayjs("2021-10-09 10:30:25").startOf("h").format(); // 2021-10-09T10:00:00+09:00
dayjs("2021-10-09 10:30:25").endOf("hour").format(); // 2021-10-09T10:59:59+09:00
dayjs("2021-10-09 10:30:25").endOf("h").format(); // 2021-10-09T10:59:59+09:00

dayjs("2021-10-09 10:30:25").startOf("minute").format(); // 2021-10-09T10:30:00+09:00
dayjs("2021-10-09 10:30:25").startOf("m").format(); // 2021-10-09T10:30:00+09:00
dayjs("2021-10-09 10:30:25").endOf("minute").format(); // 2021-10-09T10:30:59+09:00
dayjs("2021-10-09 10:30:25").endOf("m").format(); // 2021-10-09T10:30:59+09:00

dayjs("2021-10-09 10:30:25").startOf("second").format("SSS"); // 000
dayjs("2021-10-09 10:30:25").startOf("s").format("SSS"); // 000
dayjs("2021-10-09 10:30:25").endOf("second").format("SSS"); // 999
dayjs("2021-10-09 10:30:25").endOf("s").format("SSS"); // 999

startOf() 함수를 사용하여 지정 시간 단위에서의 시작 날짜 및 시간,

endOf() 함수를 사용하여 지정 시간 단위에서의 마지막 날짜 및 시간으로 설정할 수 있습니다.

※ startOf() 와 endOf() 를 사용할 때는 day 가 date와 같이 "요일"이 아닌 "일" 기준입니다.

 

날짜 및 시간 더하기 - add()

var date = dayjs("2021-10-11 10:30:25");

date.format(); // 2021-10-11T10:30:25+09:00

date.add(1, "year").format(); // 2022-10-11T10:30:25+09:00
date.add(1, "y").format(); // 2022-10-11T10:30:25+09:00

date.add(1, "month").format(); // 2021-11-11T10:30:25+09:00
date.add(1, "M").format(); // 2021-11-11T10:30:25+09:00

date.add(1, "week").format(); // 2021-10-18T10:30:25+09:00
date.add(1, "w").format(); // 2021-10-18T10:30:25+09:00

date.add(1, "day").format(); // 2021-10-12T10:30:25+09:00
date.add(1, "d").format(); // 2021-10-12T10:30:25+09:00

date.add(1, "hour").format(); // 2021-10-11T11:30:25+09:00
date.add(1, "h").format(); // 2021-10-11T11:30:25+09:00

date.add(1, "minute").format(); // 2021-10-11T10:31:25+09:00
date.add(1, "m").format(); // 2021-10-11T10:31:25+09:00

date.add(1, "second").format(); // 2021-10-11T10:30:26+09:00
date.add(1, "s").format(); // 2021-10-11T10:30:26+09:00

date.add(1000, "millisecond").format(); // 2021-10-11T10:30:26+09:00
date.add(1000, "ms").format(); // 2021-10-11T10:30:26+09:00

add() 함수를 사용하여 원하는 날짜 및 시간을 더할 수 있습니다.

※ add() 를 사용할 때 "day"는 "일" 입니다.

※ 더하는 숫자에 음수를 입력하면 빼기로도 사용할 수 있습니다.

 

날짜 및 시간 빼기 - subtract()

var date = dayjs("2021-10-11 10:30:25");

date.format(); // 2021-10-11T10:30:25+09:00

date.subtract(1, "year").format(); // 2020-10-11T10:30:25+09:00
date.subtract(1, "y").format(); // 2020-10-11T10:30:25+09:00

date.subtract(1, "month").format(); // 2021-09-11T10:30:25+09:00
date.subtract(1, "M").format(); // 2021-09-11T10:30:25+09:00

date.subtract(1, "week").format(); // 2021-10-04T10:30:25+09:00
date.subtract(1, "w").format(); // 2021-10-04T10:30:25+09:00

date.subtract(1, "day").format(); // 2021-10-10T10:30:25+09:00
date.subtract(1, "d").format(); // 2021-10-10T10:30:25+09:00

date.subtract(1, "hour").format(); // 2021-10-11T09:30:25+09:00
date.subtract(1, "h").format(); // 2021-10-11T09:30:25+09:00

date.subtract(1, "minute").format(); // 2021-10-11T10:29:25+09:00
date.subtract(1, "m").format(); // 2021-10-11T10:29:25+09:00

date.subtract(1, "second").format(); // 2021-10-11T10:30:24+09:00
date.subtract(1, "s").format(); // 2021-10-11T10:30:24+09:00

date.subtract(1000, "millisecond").format(); // 2021-10-11T10:30:24+09:00
date.subtract(1000, "ms").format(); // 2021-10-11T10:30:24+09:00

subtract() 함수를 사용하여 원하는 날짜 및 시간을 뺄 수 있습니다.

※ subtract() 를 사용할 때 "day"는 "일" 입니다.

※ 더하는 숫자에 음수를 입력하면 더하기로도 사용할 수 있습니다.

 

날짜 및 시간 차이 구하기 - diff()

const date1 = dayjs("2021-10-11 10:30:25.495", "YYYY-MM-DD HH:mm:ss.SSS");
const date2 = dayjs("2020-04-08 13:25:30.000", "YYYY-MM-DD HH:mm:ss.SSS");

date1.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2021-10-11 10:30:25.495
date2.format("YYYY-MM-DD HH:mm:ss.SSS"); // 2020-04-08 13:25:30.000

date1.diff(date2); // 47595895495

date1.diff(date2, "year"); // 1
date1.diff(date2, "y"); // 1
date1.diff(date2, "y", true); // 1.5077376883898348

date1.diff(date2, "month"); // 18
date1.diff(date2, "M"); // 18
date1.diff(date2, "M", true); // 18.09285226067802

date1.diff(date2, "week"); // 78
date1.diff(date2, "w"); // 78
date1.diff(date2, "w", true); // 78.69691715443122

date1.diff(date2, "day"); // 550
date1.diff(date2, "d"); // 550
date1.diff(date2, "d", true); // 550.8784200810185

date1.diff(date2, "hour"); // 13221
date1.diff(date2, "h"); // 13221
date1.diff(date2, "h", true); // 13221.082081944445

date1.diff(date2, "minute"); // 793264
date1.diff(date2, "m"); // 793264
date1.diff(date2, "m", true); // 793264.9249166667

date1.diff(date2, "second"); // 47595895
date1.diff(date2, "s"); // 47595895
date1.diff(date2, "s", true); // 47595895.495

date1.diff(date2, "millisecond"); // 47595895495
date1.diff(date2, "ms"); // 47595895495
date1.diff(date2, "ms", true); // 47595895495

diff() 함수를 사용하여 두 날짜의 차이를 구할 수 있습니다.

diff() 함수를 사용할 때 3번째 인수로 true 를 입력해주면 소수점까지 보실 수 있습니다.

 

날짜가 지정한 시간 단위에서 특정 날짜와 일치하는지 구하기 - isSame()

var date = dayjs("2021-10-11");

date.isSame("2021-10-11"); // true

date.isSame("2021-10-11", "year"); // true

date.isSame("2021-10-11", "month"); // true
date.isSame("2020-10-11", "month"); // false

date.isSame("2021-10-11", "day"); // true
date.isSame("2021-11-11", "day"); // false

isSame() 함수를 사용하여 날짜 객체가 지정한 시간 단위에서 특정 날짜와 일치하는지 구할 수 있습니다.

※ isSame() 함수에서 시간단위를 입력하여 사용할때 주의할 점은,

입력한 시간 단위가 같다고 해도 입력한 시간 단위보다 더 큰 시간 단위에서 이미 서로가 다르면 false를 반환합니다.

예를들어 비교할 시간 단위를 "day" 로 지정했을 때, true가 나오기 위해서는 "year", "month", "day"가 모두 일치해야 합니다.

제가 입력한 예시를 참고해주시기 바랍니다.

 

날짜가 지정한 시간 단위에서 특정 날짜보다 이전 인지, 이전 이거나 같은지 구하기 - isBefore() / isSameOrBefore()

isBefore()은 바로 사용하실 수 있지만,

isSameOrBefore() 함수를 사용하기 위해서는 dayjs 모듈에 extend 시켜줘서 사용해야합니다.

 

Module 설치하여 사용 하는 경우

import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
// OR
const isSameOrBefore = require("dayjs/plugin/isSameOrBefore");

dayjs.extend(isSameOrBefore)

위와 같이 dayjs에 extend 시켜줘서 사용하셔야 합니다.

 

CDN 사용하는 경우

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/isSameOrBefore.min.js"></script>
<script>
	dayjs.extend(dayjs_plugin_isSameOrBefore);
</script>

CDN으로 사용하시는 분들은 위와 같이 dayjs의 isSameOrBefore CDN을 추가로 불러와주시고,

dayjs에 extend 시켜줘서 사용하셔야 합니다.

"dayjs_plugin_isSameOrBefore" 를 extend 하시면 됩니다.

 

사용방법

var date = dayjs("2021-10-09");

date.isBefore("2021-10-09"); // false
date.isSameOrBefore("2021-10-09"); // true

date.isBefore("2021-10-20"); // true
date.isSameOrBefore("2021-10-20"); // true

date.isBefore("2021-10-20", "year"); // false
date.isSameOrBefore("2021-10-20", "year"); // true

date.isBefore("2021-10-20", "month"); // false
date.isSameOrBefore("2021-10-20", "month"); // true

date.isBefore("2021-10-20", "day"); // true
date.isSameOrBefore("2021-10-20", "day"); // true

isBefore() 함수를 사용하여 날짜 객체가 지정한 시간 단위에서 특정 날짜보다 이전인지 확인할 수 있습니다.

isSameOrBefore() 함수를 사용하여 날짜 객체가 지정한 시간 단위에서 특정 날짜보다 이전이거나 같은지 확인할 수 있습니다.

 

날짜가 지정한 시간 단위에서 특정 날짜보다 이후 인지, 이후 이거나 같은지 구하기 - isAfter() / isSameOrAfter()

isAfter()은 바로 사용하실 수 있지만,

isSameOrAfter() 함수를 사용하기 위해서는 dayjs 모듈에 extend 시켜줘서 사용해야합니다.

 

Module 설치하여 사용 하는 경우

import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
// OR
const isSameOrAfter = require('dayjs/plugin/isSameOrAfter');

dayjs.extend(isSameOrAfter);

위와 같이 dayjs에 extend 시켜줘서 사용하셔야 합니다.

 

CDN 사용하는 경우

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/isSameOrAfter.min.js"></script>
<script>
	dayjs.extend(dayjs_plugin_isSameOrAfter);
</script>

CDN으로 사용하시는 분들은 위와 같이 dayjs의 isSameOrAfter CDN을 추가로 불러와주시고,

dayjs에 extend 시켜줘서 사용하셔야 합니다.

"dayjs_plugin_isSameOrAfter" 를 extend 하시면 됩니다.

 

사용방법

var date = dayjs("2021-10-09");

date.isAfter("2021-10-09"); // false
date.isSameOrAfter("2021-10-09"); // true

date.isAfter("2021-10-01"); // true
date.isSameOrAfter("2021-10-01"); // true

date.isAfter("2021-10-01", "year"); // false
date.isSameOrAfter("2021-10-01", "year"); // true

date.isAfter("2021-10-01", "month"); // false
date.isSameOrAfter("2021-10-01", "month"); // true

date.isAfter("2021-10-01", "day"); // true
date.isSameOrAfter("2021-10-01", "day"); // true

 

isAfter() 함수를 사용하여 날짜 객체가 지정한 시간 단위에서 특정 날짜보다 이후인지 확인할 수 있습니다.

isSameOrAfter() 함수를 사용하여 날짜 객체가 지정한 시간 단위에서 특정 날짜보다 이후이거나 같은지 확인할 수 있습니다.

 

날짜가 지정한 시간 단위에서 특정 날짜들 사이에 있는지 구하기 - isBetween()

isBetween() 함수를 사용하기 위해서는 dayjs 모듈에 extend 시켜줘서 사용해야합니다.

 

Module 설치하여 사용 하는 경우

import isBetween from "dayjs/plugin/isBetween";
// OR
const isBetween = require('dayjs/plugin/isBetween');

dayjs.extend(isBetween);

위와 같이 dayjs에 extend 시켜줘서 사용하셔야 합니다.

 

CDN 사용하는 경우

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/plugin/isBetween.min.js"></script>
<script>
	dayjs.extend(dayjs_plugin_isBetween);
</script>

CDN으로 사용하시는 분들은 위와 같이 dayjs의 isBetween CDN을 추가로 불러와주시고,

dayjs에 extend 시켜줘서 사용하셔야 합니다.

"dayjs_plugin_isBetween" 를 extend 하시면 됩니다.

 

사용방법

var date = dayjs("2021-10-09"); // today

date.isBetween("2021-10-09", "2021-10-09"); // false
date.isBetween("2021-10-08", "2021-10-10"); // true
date.isBetween("2021-10-08", "2021-10-09"); // false
date.isBetween("2021-10-09", "2021-10-10"); // false
date.isBetween("2021-10-09", undefined); // false

date.isBetween("2021-10-08", "2021-10-10", "year"); // false
date.isBetween("2020-10-09", "2022-10-09", "year"); // true
date.isBetween("2021-10-08", "2021-10-10", "month"); // false
date.isBetween("2021-09-09", "2021-11-09", "month"); // true
date.isBetween("2021-10-09", "2021-10-09", "day"); // false
date.isBetween("2021-10-08", "2021-10-10", "day"); // true

date.isBetween("2021-10-09", "2021-10-09", undefined, "()"); // false
date.isBetween("2021-10-09", "2021-10-09", undefined, "[)"); // false
date.isBetween("2021-10-09", "2021-10-10", undefined, "[)"); // true
date.isBetween("2021-10-09", "2021-10-09", undefined, "(]"); // false
date.isBetween("2021-10-08", "2021-10-09", undefined, "(]"); // true
date.isBetween("2021-10-09", "2021-10-09", undefined, "[]"); // tru

isBetween() 함수를 사용하여 날짜 객체가 특정 날짜들 사이에 있는지 확인할 수 있습니다.

isBetween() 함수에서 첫번째와 두번째에 날짜를 넣는 부분에 undefined를 입력하면 오늘 날짜로 대체됩니다.

세번째 인수에는 시간 단위를 지정할 수 있고,

네번째 인수에서 '('와 ')'는 입력한 시작날짜와 마지막 날짜를 포함하지 않고 비교하도록 하고,

'['와 ']'는 입력한 시작날짜와 마지막 날짜를 포함하여 비교하도록 설정합니다.

 

 

이 밖에도 day.js에서 지원하는 함수는 정말 많이 있습니다.

그 중에 저도 자주 사용하는 것들만 모아서 간단히 설명해드렸습니다.

더 자세한 사항은 공식문서를 읽어보시길 바랍니다.

 

그럼 이상으로 day.js 사용 방법에 대한 설명을 마치도록 하겠습니다.

 

 

도움이 되셨다면 공감, 댓글 부탁드립니다!

궁금하신 점이나 요청사항은 언제든지 말씀해주세요!

피드백도 언제나 환영입니다!

 

감사합니다.

 

참고 자료 : https://day.js.org/