날짜와 시간 포맷 커스텀하기 :Day.js 라이브러리

 

 

🌈 JS에서 new Date( ) 객체

JavaScript에서는 Date 객체를 생성하므로 현재 시간 등을 표시할 수 있다.

아래처럼 new Date()를 통해 날짜 표시할 수 있는데 문제는 format이 정돈되지 않았다는 점!

export default function App() {
  const date = new Date();
  return <div>{date.toString()}</div>;
}

 

Date를 표시할 때 default format

 

 

☀️ Day.js를 사용해서 format 변경하기

naver News API에서 날짜를 가져와서 표시할 경우 아래처럼 기본 포맷으로 표시가 됐다. 이걸 custom 해보자!

1) Day.js 라이브러리를 설치한다.

npm install dayjs --save

 

2) dayjs 라이브러리를 import 해준다.

import dayjs from 'dayjs'

 

3) format를 변환해준다.

  <span> {dayjs(date).format('YYYY-MM-DD hh:mmA')}</span>

 

 

✨ Day.js의 다양한 format

YY	18	Two-digit year
YYYY	2018	Four-digit year
M	1-12	The month, beginning at 1
MM	01-12	The month, 2-digits
MMM	Jan-Dec	The abbreviated month name
MMMM	January-December	The full month name
D	1-31	The day of the month
DD	01-31	The day of the month, 2-digits
d	0-6	The day of the week, with Sunday as 0
dd	Su-Sa	The min name of the day of the week
ddd	Sun-Sat	The short name of the day of the week
dddd	Sunday-Saturday	The name of the day of the week
H	0-23	The hour
HH	00-23	The hour, 2-digits
h	1-12	The hour, 12-hour clock
hh	01-12	The hour, 12-hour clock, 2-digits
m	0-59	The minute
mm	00-59	The minute, 2-digits
s	0-59	The second
ss	00-59	The second, 2-digits
SSS	000-999	The millisecond, 3-digits
Z	+05:00	The offset from UTC, ±HH:mm
ZZ	+0500	The offset from UTC, ±HHmm
A	AM PM
a	am pm

---

⭐️ 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

Date() 생성자 - JavaScript | MDN

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

Day.js · 2kB JavaScript date utility library