민우의 코딩일지
article thumbnail
Vue Day.js 라이브러리로 진행률(%) 표시하기
💻 FullStack/Vue.js 2024. 1. 14. 18:34

예제 보기 코드 내용 {{ data.title }} {{ ` ${dayjs(data.startDate).format('YYYY/MM/DD HH:mm')} ~ ${dayjs(data.endDate).format('YYYY/MM/DD HH:mm')} -> ${Math.floor(getCalcProgress(data.startDate, data.endDate))}% ` }} 코드 설명 서버로부터 시작일과 종료일이 각 varchar(8)인 데이터 목록을 받아왔다는 가정을 했다. 해당 목록을 반복문으로 보여줄때 dayjs 라이브러리를 이용해 진행률이 나올 수 있도록 함수를 작성했다 ✍ 리턴할때 Math 객체의 max, min 함수를 이용해서 리턴되는 값은 0 미만이거나, 100이 초과될 수 없도록해주었고 해당 함..

article thumbnail
Vue 날짜 표시 라이브러리 Day.js
💻 FullStack/Vue.js 2024. 1. 14. 18:34

라이브러리 소개 날짜를 표시할때 Date 객체를 생성하고, 잘라내고 .. 번거로운 과정을 생략할 수 있다. 간단한 사용방법으로 업무의 효율성을 높여주는 아주 훌륭한 라이브러리 👍 라이브러리 사용 day.js 설치하기 Node.js npm install dayjs # 혹은 yarn add dayjs # 혹은 pnpm add dayjs 위 방식 대신, CDN 방식을 이용할 수도 있다. 취향껏 사용해주자 CDN 예시 및 설명 기본적인 사용 방법 ( With. 한국어 설정 ) dayjs()를 이용해서 오늘 표시 해보기 {{ dayjs() }} dayjs().format() 함수로 포맷 형식 커스텀 가능 ! {{ dayjs().format('YYYY - MM - DD') }} {{ dayjs().format('Y..