[Vue.js] dayjs로 날짜 포맷 변경하기

 

 

vue에서 date를 출력하면 다음과 같은 형식으로 출력된다. 깔끔하게 원하는대로 출력하고 싶으면 어떻게 해야할까?

dayjs를 이용하면 된다. 

 

 

 

 

2011년에 첫 공개된 moment.js 라이브러리를 사용하려고 했는데 moment는 이제 더이상의 업데이터가 없다고 발표하여 moment.js보다 dayjs를 많이 사용하는 것 같다. 

 

 

 

📑 설치 방법

 

vue.js의 npm 방식으로 dayjs를 설치해줍니다.

 

npm install dayjs --save

 

 

dayjs를 import할 수 있는 방법은 2가지가 있는데 첫번 째는 컴포넌트 안 data()에 추가해주는 방법입니다. 

 

 

import dayjs from 'dayjs'

export default {
  data() {
    return {
      dayjs
    }
  }
}

 

 

두번 째 방법은 전역으로 dayjs를 사용한다면 main.js에 선언해두면 됩니다. 이렇게 선언한 후 component에서 $dayjs로 사용하면 된다. 

 

 

import dayjs from 'dayjs'
import { createApp } from 'vue'
const app = createApp(App)
    
app.config.globalProperties.$dayjs = dayjs
    
app.mount("#app')

 

 

<td>{{ $dayjs(row.regdate).format("YYYY-MM-DD")}}</td>