React- dayjs 활용 날짜가공하기

웹 또는 앱 서비스 제공시 날짜관련 하여 유용하게 활용할 수 있는 라이브러리인 dayjs 에 대해 알아보겠습니다.

 

서비스 제공에 있어서 날짜 계산, 시간 계산이 필요한 경우가 상당히 많은데 가벼우면서도 쉽게 사용할 수 있는 유용하여 몇 가지 예시를 들어 활용방법을 소개하겠습니다.

 

https://day.js.org/en/

Day.js · 2kB JavaScript date utility library

 

1.  설치하기

• 일반적인 Node.js 패키지 설치와 동일
• npm install dayjs

2.  사용하기

• 라이브러리에서 기본 제공하는 기능
  • 오늘 날짜     const now = dayjs();
  • 다양한 날짜 포맷 지원 

날짜 포맷

• get - 특정 날짜에서 필요한 값을 얻기
  • 월은 '0' 부터 시작 (즉, 1월이 '0' 이고 12월이 '11')
  • 요일 '0' 일요일 ~ '6' 토요일

날짜에서 지정한 값 얻기

• set - 특정 날, 요일, 시간 등 값을 임의로 지정하기

 

• 날짜 계산 (더하기, 빼기)
  • dayjs(now).add(3, "hour").format("YYYY.MM.DD HH:mm:ss")
  • dayjs(now).subtract(3, "hour").format("YYYY.MM.DD HH:mm:ss")

• 별도 plugin 이용하기
  • dayjs 기능 확장을 위해 독립적으로 추가하는 모듈
  • 추가설치 없이 필요한 plugin을 import 하여 사용하면 됨
  •  사용할 때는 dayjs에 extend 를 붙여 사용할 plugin을 지정 
  • plugin 종류 및 사용법은 dayjs 제공 문서 참조

import isBetween from "dayjs/plugin/isBetween";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";

dayjs.extend(isBetween);
dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);

👉  isBetween : 지정한 날짜가 특정 기간 사이에 있는 지 여부 판단 (Boolean) 

👉  isSameOrBefore : 지정한 날짜가 특정일자 또는 이전 날짜인지 판단 (Boolean) 

👉  isSameOrAfter : 지정한 날짜가 특정일자 또는 이후 날짜인지 판단 (Boolean) 

 

3.  예제 코드 및 결과 

import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";

dayjs.extend(isBetween);
dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);

export const runPracticeDayjs = () => {
	const hour = new Date().getHours();
	console.log("hour", hour);
	const now = dayjs("2022-11-04 16:01:30");
	console.log("===== Practice Dayjs =====");
	console.log(
	"1. set minute - hh",
	dayjs(now).set("minute", 5).format("YYYY.MM.DD hh:mm:ss a A")
	);
	console.log(
	"2. set minute - HH",
	dayjs(now).set("minute", 5).format("YYYY.MM.DD HH:mm:ss")
	);
	console.log(
	"3. set hour",
	dayjs(now).set("hour", 10).format("YYYY.MM.DD HH:mm:ss")
	);
	console.log("4. get year", dayjs(now).get("year"));
	console.log("5. get month", dayjs(now).get("month")); // 0~11(1월~12월)
	console.log("6. get date", dayjs(now).get("date"));
	console.log("7. get day", dayjs(now).get("day")); // 0:일 ~ 6:토
	console.log("8. get second", dayjs(now).get("second"));
	console.log("9. add hour",dayjs(now).add(3, "hour").format("YYYY.MM.DD HH:mm:ss"));
	console.log("10. subtract hour",dayjs(now).subtract(3, "hour").format("YYYY.MM.DD HH:mm:ss"));
	console.log("11. startOf", dayjs(now).startOf("month").format("YYYY.MM.DD"));
	console.log("12. endOf", dayjs(now).endOf("month").format("YYYY.MM.DD"));
	const aDate = dayjs("2022-10-29 15:00:20");
	const bDate = dayjs("2022-10-29 16:00:00");
	console.log("13. isSame month", dayjs(aDate).isSame(bDate, "month"));
	console.log("14. isSame hour", dayjs(aDate).isSame(bDate, "hour"));
	console.log("15. isBefore", dayjs(aDate).isBefore(bDate));
	console.log("16. isBefore date", dayjs(aDate).isBefore(bDate, "date"));
	console.log("17. isAfter a,b", dayjs(aDate).isAfter(bDate));
	console.log("18. isAfter b,a", dayjs(bDate).isAfter(aDate));
	console.log("19. isSameOrBefore", dayjs(aDate).isSameOrBefore(bDate, "date"));
	console.log("20. isSameOrAfter", dayjs(aDate).isSameOrAfter(bDate, "date"));
	console.log("21. isBetween",dayjs("2022-10-29 15:30:00").isBetween(aDate, bDate));
	console.log("22. isBetween date",dayjs("2022-10-29 15:30:00").isBetween(aDate, bDate, "date")
	);