IT 노트/JavaScript

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

czecze 2021. 9. 22. 09:00
반응형

일단 프로젝트안에서 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 가 출력된다
반응형