[JS라이브러리] dayjs를 이용하여 자주 사용하는 날짜 변환클래스 작성하기

일단 프로젝트안에서 dayjs를 인스톨할것

https://day.js.org/

$ npm install dayjs

간단한 dayjs사용법

import dayjs from 'dayjs'

let dayjsDate = dayjs('2019-03-01') // 2019-03-01일자 dayjs 객체 할당
dayjsDate.add(1, 'day') // 1일 추가(반영 X)
console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'가 아닌 '2019-03-01'가 출력됨
dayjsDate = dayjsDate.add(1, 'day') // 1일 추가
console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'

utility/date.ts를 작성

• typesctipt를 이용합니다

  /**
  * 날짜 변환 관련된 util
  */
  import dayjs, { Dayjs } from 'dayjs'
  // FIX: https://github.com/iamkun/dayjs/issues/254
  // @see https://github.com/iamkun/dayjs/issues/73#issuecomment-464443622
  import customParseFormat from 'dayjs/plugin/customParseFormat'
  import utc from 'dayjs/plugin/utc'
  import ko from 'dayjs/locale/ko'
  dayjs.extend(customParseFormat)
  dayjs.extend(utc)
  dayjs.locale(ko)
  
  const CUSTOM_PARSE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.000ZZ'
  
  export const SERVER_FORMAT = {
      DATE: 'YYYY-MM-DD',
      DEFAULT: 'YYYY-MM-DDTHH:mm:ss.SSSZZ',
      START_TIME: 'YYYY-MM-DDTHH:mm:00.SSSZZ',
      END_TIME: 'YYYY-MM-DDTHH:mm:59.SSSZZ'
  }
  
  export const DISPLAY_FORMAT = {
      DATE: 'YYYY/MM/DD',
      DATE_AND_TIME: 'YYYY/MM/DD HH:mm'
  }
  
  /**
   * 날짜문자열, 수치, Date오브젝트, Dayjs오브젝트로부터 Dayjs오브젝트를 건네주기
   * 인수가 없는 경우 현재시간의 Dayjs오브젝트가 돌아온다
   * @param date
   */
  export const getDayjs = (date?: string | number | Date | Dayjs, isUTC = false): Dayjs => {
      // UTC의 경우
      if (isUTC) {
          return dayjs.utc(date)
      }
  
      // string이외에는 커스텀포맷으로 하지 않음
      if (typeof date === 'string') {
          return dayjs(date, CUSTOM_PARSE_FORMAT)
      }
      return dayjs(date)
  }
  
  /**
   * 정확한 날짜인지 확인
   * @param date
   */
  export const isValidDate = (date?: string | number | Date | Dayjs, isUTC = false): boolean => {
      return getDayjs(date, isUTC).isValid()
  }
  
  /**
   * 포맷을 지정하여 날짜를 취득
   * @param date
   * @param format
   */
  export const formattedDate = (date?: string | number | Date | Dayjs, format?: string, isUTC = false): string => {
      if (typeof date === 'string' && !date) {
          return ''
      }
      return getDayjs(date, isUTC).format(format)
  }
  
  /**
   * 개시시간용: 날짜문자열을 서버에서 사용하는 포멧으로 변환
   * 초수를`00`으로한다
   *
   * @example 2019-09-20T23:00 -> 2019-09-20T23:00:00.000+0900
   * @param date
   */
  export const convertStartTimeToServerFormat = (date?: string | Date): string => {
      return formattedDate(date, SERVER_FORMAT.START_TIME)
  }
  
  /**
   * 종료시간용: 날짜문자열을 서버에서 사용하는 포멧으로 변환
   * 초수를`59`으로한다
   *
   * @example 2019-09-20T23:59 -> 2019-09-20T23:59:59.000+0900
   * @param date
   */
  export const convertEndTimeToServerFormat = (date?: string | Date): string => {
      return formattedDate(date, SERVER_FORMAT.END_TIME)
  }
  
  /**
   * 날짜문자열을 서버에서 사용하는 포멧으로 변환
   *
   * @example 2019-09-20T23:59 -> 2019-09-20T23:59:00.000+0900
   * @param date 날짜문자열
   */
  export const convertToServerFormat = (date?: string | Date): string => {
      return formattedDate(date, SERVER_FORMAT.DEFAULT)
  }
  
  /**
   * 날짜문자열을 서버에서 사용하는 포멧으로 변환
   *
   * @example 2019-09-09T22:56:12.755+0000 -> 2019-09-20
   * @param date 날짜문자열
   */
  export const convertToDateServerFormat = (date?: string | Date): string => {
      return formattedDate(date, SERVER_FORMAT.DATE)
  }
  
  /**
   * 날짜문자열을 표시용포멧(년월일)으로 변환
   *
   * @example 2019-09-09T22:56:12.755+0000 -> 2019/09/10
   * @param date 날짜문자열
   */
  export const convertToDateDisplayFormat = (date?: string | Date): string => {
      return formattedDate(date, DISPLAY_FORMAT.DATE)
  }
  
  /**
   * 날짜문자열을 표시용포멧(년월일분)으로 변환
   *
   * @example 2019-09-09T22:56:12.755+0000 -> 2019/09/10 22:56
   * @param date 날짜문자열
   */
  export const convertToDateAndTimeDisplayFormat = (date?: string | Date): string => {
      return formattedDate(date, DISPLAY_FORMAT.DATE_AND_TIME)
  }
  
  /**
   * 날짜문자열(UTC)을 표시용포멧(년월일분)으로 변환
   *
   * @example 2019-09-27T08:39:45Z -> 2019/09/27 08:39
   * @param date 날짜문자열(UTC)
   */
  export const convertToUTCDateAndTImeDisplayFormat = (date?: string | Date): string => {
      return formattedDate(date, DISPLAY_FORMAT.DATE_AND_TIME, true)
  }
  
  /**
   * 두 날짜의 차분을 취득(일)
   */
  export const daysDiff = (startDate: string | Date, endDate: string | Date): number => {
      return dayjs(endDate).diff(dayjs(startDate), 'day')
  }
  
  /**
   * num일 이후의 날을 취득
   */
  export const daysAdd = (date: string | Date, num: number, unit: any = 'day'): any => {
      return dayjs(date).add(num, unit)
  }
  
  /**
   * num일 이전의 날을 취득
   */
  export const daysSubtract = (date: string | Date, num: number, unit: any = 'day'): any => {
      return dayjs(date).subtract(num, unit)
  }

 

다른 파일에서 date util를 불러들여서 이용(예)

import { convertStartTimeToServerFormat } from '~/utility/date.ts'

const serverTime = convertStartTimeToServerFormat('2019-09-20T23:00')
console.log(serverTime) // 2019-09-20T23:00:00.000+0900 가 출력된다