Vue 날짜 표시 라이브러리 Day.js

 

 

 

라이브러리 소개

 

 

날짜를 표시할때 Date 객체를 생성하고, 잘라내고 .. 번거로운 과정을 생략할 수 있다.

간단한 사용방법으로 업무의 효율성을 높여주는 아주 훌륭한 라이브러리 👍

 

 

 

 

 

라이브러리 사용

 

day.js 설치하기

 

 

Node.js

 

npm install dayjs
# 혹은
yarn add dayjs
# 혹은
pnpm add dayjs

 

 

위 방식 대신, CDN 방식을 이용할 수도 있다.  취향껏 사용해주자

 

 

CDN

 

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

 

 

 

 

 

예시 및 설명

 

 

기본적인 사용 방법 ( With. 한국어 설정 )

 

 

 

<template>
  <section>
    <article>
      <h4>dayjs()를 이용해서 오늘 표시 해보기</h4>
      <p>{{ dayjs() }}</p>
    </article>

    <article>
      <h4>dayjs().format() 함수로 포맷 형식 커스텀 가능 !</h4>
      <p>{{ dayjs().format('YYYY - MM - DD') }}</p>
      <p>{{ dayjs().format('YYYY년 MM월 DD일') }}</p>
      <p>{{ dayjs().format('YYYY년 MM월 DD일 hh시 mm분 ss초 ') }}</p>
    </article>

    <article>
      <h4>dayjs().format() 함수로 요일을 표시해보기</h4>
      <p>{{ dayjs().format('ddd') }}</p>
      <sub>*. 한국어로 표시해보고싶다면 스크립트 태그에 주석된 내용 풀어보기!</sub>
    </article>
  </section>
</template>

<script setup>
import dayjs from 'dayjs';

// 한국어로 설정하고싶다면 아래 주석을 풀어보기
// import 'dayjs/locale/ko';
// dayjs.locale('ko');
</script>

<style>
article {
  padding: 15px;
  margin: 15px 0;
  background: #eee;
  border-radius: 10px;
}
</style>

 

한국어를 사용하고싶다면

기존 임포트한  import dayjs from 'dayjs'; 내용 밑에 다음 2줄을 추가해주면 된다 ✍

import 'dayjs/locale/ko';
dayjs.locale('ko');

 

다국어 설정은 한국어 외에도 가능 !

import 'dayjs/locale/ko';
import 'dayjs/locale/en'; // 새로 추가
dayjs.locale('en'); // 내용 수정 dayjs.locale('ko');

자세한 내용은 day.js 공식 사이트 i18n 소개 페이지를 참고하자 !
📃 https://day.js.org/docs/en/i18n/i18n

 

 

 

 

날짜 더하기, 빼기 , 비교하기

 

 

날짜를 더하거나 빼고 비교할땐 공통적으로 수치와 단위가 필요하다.

그중에서 단위는 다음과 같다 👀

 

 

( 공통 ) 사용가능한 단위 목록

 

단위명	단축명	의미
day	d	일
week	w	주
month	M	월
year	y	년
hour	h	시간
minute	m	분
second	s	초
millisecond	ms	밀리초(1000 = 1초)

*. 출처: https://day.js.org/docs/en/manipulate/add#list-of-all-available-units

 

 

 

날짜 더하기, 빼기

 

날짜 더하기, 빼기는 각 add(),  substract() 함수를 이용할 수 있다.

/* dayjs()를 사용하면 현재 시간을 반환한다. */

// dayjs().add(수치, 단위) 혹은  .subtract(수치, 단위)를 이용할 수 있다.
dayjs().add(1, 'day'); // 하루 추가된 날짜로 표시
dayjs().subtract(1, 'day'); // 하루 줄어든 날짜로 표시

 

 

 

날짜 차이 계산하기

 

날짜 비교는 diff() 함수를 이용할 수 있다.  

/* 비교적 큰 날짜.diff(비교적 작은 날짜, 단위) */

// 2019년 1월 25일 - 2018년 6월 5일 = 7개월 차이
const date1 = dayjs('2019-01-25')
date1.diff('2018-06-05', 'month') // 결과: 7 

// 2024년 1월 25일 - 2024년 1월 20일 = 5일 차이
const date2 = dayjs('2024-01-25')
date1.diff('2024-01-20', 'day')  // 결과: 5

 

 

 

특정 날짜와 일치하는지, 이전인지, 이후인지 확인하기

 

특정 날짜와 일치하는지, 이전인지, 이후인지는 차례대로 각 isSame() , isBefore() , isAfter()  함수를 이용하여 알 수 있다.

 

dayjs().isSame('2024-01-14', 'day') // 오늘 날짜가 2024년 1월 14일이라면 true, 아닐경우 false
dayjs().isBefore('2024-12-31', 'day') // 오늘 날짜가 2024년 12월 31일 이전일경우 true, 아닐경우 false
dayjs().isAfter('2024-01-01', 'day') // 오늘 날짜가 2024년 1월 1일이후라면 true, 아닐경우 false

 

 

 

특정 날짜를 "포함"해서 일치하는지, 이전인지, 이후인지 확인하기

 

눈치 빠른 사람들은 이미 눈치챘겠지만,

사실 위의 조건들은 (특정 날짜와 일치하는지, 이전인지, 이후인지 확인하기) 비교 대상 날짜와 일치 조건이 빠져있다.

 

비교 대상 날짜를 포함해서 비교하고싶다면,

추가로 day.js 플러그인을 import 하고  dayjs.extend() 함수를 이용해서 적용해주면 된다

 

<template>
<div>

  <!-- 오늘이 24년 1월 14일과 같거나, 이전이라면 true, 아니라면 false -->
  <p>{{ dayjs().isSameOrBefore('2024-01-14', 'day') }}</p>
  
  <!-- 오늘이 24년 1월 14일과 같거나, 이후라면 true, 아니라면 false -->
  <p>{{ dayjs().isSameOrAfter('2024-01-14', 'day') }}</p>
  
  <!--
  
  isBetween() 함수 4번째 매개변수 괄호별 의미 정리 ✍
  
  대괄호 [ : 시작일 포함
  대괄호 ] : 종료일 포함
  
  소괄호 ( : 시작일 이후 ( 시작일 포함 x )
  소괄호 ) : 종료일 이전 ( 종료일 포함 x )
  
  -->
  <!-- 오늘이 24년 10월 9일부터 24년 11월 9일에 해당한다면 true, 아니라면 false -->
  <p>{{ dayjs().isBetween("2024-10-09", "2024-11-09", undefined, "[]"); }}</p>
  
  <!-- 오늘이 24년 10월 9일"이후"부터 24년 11월 9일에 해당한다면 true, 아니라면 false -->
  <p>{{ dayjs().isBetween("2024-10-09", "2024-11-09", undefined, "(]"); }}</p>
 
  <!-- 오늘이 24년 10월 9일부터 24년 11월 9일 "이전"에 해당한다면 true, 아니라면 false -->
  <p>{{ dayjs().isBetween("2024-10-09", "2024-11-09", undefined, "[)"); }}</p>
  
  <!-- 오늘이 24년 10월 9일"이후"부터 24년 11월 9일 "이전"에 해당한다면 true, 아니라면 false -->
  <p>{{ dayjs().isBetween("2024-10-09", "2024-11-09", undefined, "()"); }}</p>
  
</div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import dayjs from 'dayjs';
/* day.js 플러그인 추가 */
import isBetween from "dayjs/plugin/isBetween";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
/* day.js 플러그인 적용 */
dayjs.extend(isBetween)
dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)
</script>

 

isBetween 함수 3번째 매개변수(단위)에 undefined에 대해서

undefined를 사용하면,  기본 값 day (일)을 기준으로 비교하게된다.
일 기준으로 비교하는게 아니라 시간, 분으로 하고싶다면  hour, minute 를 대신 사용할 수도 있다.

 

 

 

 

 

참고 문서

 

 

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

Day.js · 2kB JavaScript date utility library

 

https://jsikim1.tistory.com/196

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