날짜 선택 라이브러리 dayjs

박영은·2022년 4월 25일
0

원래 moment를 사용하려고 했으나 이 전에 작성한 글처럼 개발이 중단되기도 했고, 용량도 dayjs가 훨씬 가벼운 등의 이유로 프로젝트에 적용시켜보았다.


1. 설치 - yarn으로 설치함.

yarn add dayjs or npm install dayjs --save

2. 사용법

  • 기본 사용법
    dayjs(변경해야하는 날짜).format('YYYY-MM-DD HH:mm:ss');
    dayjs() = 포멧을 변경해야하는 값을 입력
    format() = 원하는 형식을 입력
👩‍💻 사용하고자 하는 폴더에 import
<script>
  import dayjs from "dayjs";

  export default defineComponent({
    methods: {
     btnDayJs() {   //--- 일단 확인하고자 click event로 적용했었음.
     	const date = new Date(); // 현재 날짜 및 시간 가져오기.
        const now = dayjs(date); // dayjs형식에 현재 날짜 및 시간 담음. 
        // 👉 dayjs(date).format~이런식으로 사용해도 됨.
        const day = now(date).format("YYYY-MM-DD HH:mm:ss");
        console.log("날짜 : ", day); // 👉 데이 :  2022-04-26 01:43:12
      },
       console.log("year : ", now.format("YYYY")); // 👉 year : 2022
       console.log( dayjs(date).format("dddd")); // 👉  Monday
  },
</script>





  1. 한글번역
👉 기본 (영문으로 출력됨.)
ex)  
<script>
import dayjs from "dayjs";
...
	console.log("요일 : ", dayjs(new Date()).format("dddd"));
    ---> 요일 : Monday
</script>


👉 한국어로 설정
<script>
import dayjs from "dayjs";
import "dayjs/locale/ko"; //한국어
dayjs.locale("ko");
...
	console.log("요일 : ", dayjs(new Date()).format("dddd"));
    ---> 요일 : 월요일
</script>

https://www.npmjs.com/package/dayjs
https://github.com/iamkun/dayjs/blob/HEAD/docs/ko/README-ko.md
https://jsikim1.tistory.com/196
https://beforb.tistory.com/24

profile
Front-end

0개의 댓글