[javascript] 자바스크립트 날짜 포맷 date format 알아보기

 

 

안녕하세요!

오늘은 자바스크립트에서 날짜 형식의 데이터를 다루는 방법에 대해 포스팅하려고 합니다. 자바스크립트에서는 날짜를 다루는 데에 유용한 내장 객체인 Date 객체를 사용합니다. 이 객체를 활용하여 날짜 데이터를 원하는 형식으로 포맷하는 방법과 문자 형식의 데이터를 다시 날짜 형식으로 변환하는 방법을 알아보겠습니다.

날짜 형식의 데이터를 처리하는 경우, 데이터의 형식에 따라 문자열로 변환하거나 날짜 객체로 변환하는 작업이 필요합니다. 이러한 기능들을 효율적으로 활용하여 데이터를 다루는 방법을 정리해 드리겠습니다.

그럼 함께 자바스크립트에서 날짜 데이터를 처리하는 방법을 알아보도록 하겠습니다.

 

---

Date Format 이란?

자바스크립트에서 Date 객체를 사용하여 날짜를 다룰 때, 날짜 데이터의 포맷을 원하는 형식으로 변환하는 작업을 Date Format이라고 합니다. 날짜 데이터를 원하는 형태로 포맷하는 방법은 여러 가지가 있습니다.

 

Date 객체에서 제공하는 메소드를 활용하여 날짜 데이터를 원하는 형식으로 포맷할 수 있습니다. 

가장 일반적으로 사용되는 포맷 메소드로는 getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds() 등이 있습니다. 이 메서드들을 조합하여 원하는 형태의 문자열로 변환할 수 있습니다.

 

---

formatDate()

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    const dateStr = '2022-12-28';
    const dateStrId01 = formatDate(dateStr, '-');
});

/**
 * date format
 */
function formatDate (dateStr, pattern) {

    // dateStr, pattern validation check
    if (!dateStr || !pattern) {
        return '';
    }

    // pattern 기준으로 문자열 split
    const dateArr = dateStr.split(pattern);
    // 0: YYYY, 1: MM, 2: DD
    // month는 -1 해야함
    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
}
</script>

위의 소스 코드는 자바스크립트를 사용하여 날짜 데이터를 원하는 형식으로 포맷하는 함수인 formatDate를 구현한 예시입니다. 

해당 코드를 실행하면, dateStr 변수에 저장된 날짜 문자열인 '2022-12-28'을 formatDate 함수를 이용하여 원하는 형식으로 변환하여 출력합니다.

 

formatDate 함수는 두 개의 파라미터를 받습니다. 첫 번째 파라미터인 dateStr은 날짜 데이터가 포함된 문자열이고, 두 번째 파라미터인 pattern은 날짜 데이터의 형식을 나타내는 구분자입니다. 

예시에서는 '-'를 사용하여 'YYYY-MM-DD' 형식의 날짜를 나타내고 있습니다.

 

해당 함수에서는 먼저 입력받은 dateStr과 pattern이 유효한지를 검사한 후, dateStr을 pattern 기준으로 문자열을 분리하여 dateArr 배열에 저장합니다. 그리고 new Date()를 사용하여 dateArr 배열의 값을 기반으로 새로운 Date 객체를 생성합니다.

위의 예시에서는 '2022-12-28'을 'YYYY-MM-DD' 형식으로 변환하여 Date 객체로 생성한 후, 이를 변수 dateStrId01에 저장하고 있습니다.

이러한 방식으로 formatDate 함수를 사용하면, 날짜 데이터를 원하는 형식으로 포맷할 수 있습니다. 

예를 들어, formatDate('2022/12/28', '/')와 같이 다른 구분자를 사용하여 원하는 형식으로 날짜 데이터를 포맷할 수도 있습니다.

 

 

---

formatDateTime()

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    
    const dateStr = '2022-12-28 19:30:13';
    const dateStrId02 = formatDateTime(dateStr);
    console.log(dateStrId02);
});

/**
 * 날짜 시간 date format
 */
function formatDateTime (dateStr) {
    if (!dateStr) {
        return '';
    }

    const dateSplit = dateStr.split(' ');
    const dateArr = dateSplit[0].split('-');
    const timeArr = dateSplit[1].split(':');

    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2], timeArr[0], timeArr[1], timeArr[2]);
}
</script>

위의 소스 코드는 자바스크립트를 사용하여 날짜 및 시간 데이터를 원하는 형식으로 포맷하는 함수인 formatDateTime를 구현한 예시입니다. 해당 코드를 실행하면, dateStr 변수에 저장된 날짜와 시간이 포함된 문자열인 '2022-12-28 19:30:13'을 formatDateTime 함수를 이용하여 원하는 형식으로 변환하여 출력합니다.

formatDateTime 함수는 한 개의 파라미터를 받습니다. dateStr은 날짜와 시간 데이터가 포함된 문자열입니다.

해당 함수에서는 먼저 입력받은 dateStr이 유효한지를 검사한 후, 문자열을 공백(' ')을 기준으로 날짜 부분과 시간 부분으로 나눕니다. 이후, 각각의 부분을 -와 : 기준으로 배열에 저장합니다.

그리고 new Date()를 사용하여 날짜와 시간 정보를 기반으로 새로운 Date 객체를 생성합니다. dateArr 배열에 저장된 날짜 정보와 timeArr 배열에 저장된 시간 정보를 이용하여 Date 객체를 생성하였습니다.

위의 예시에서는 '2022-12-28 19:30:13'을 Date 객체로 변환한 후, 이를 변수 dateStrId02에 저장하고 있으며, console.log()를 통해 결과를 출력하고 있습니다.

이러한 방식으로 formatDateTime 함수를 사용하면, 날짜 및 시간 데이터를 원하는 형식으로 포맷할 수 있습니다. 이를 활용하여 다양한 날짜와 시간 데이터를 원하는 형태로 다룰 수 있습니다.

 

---

formatDate(), formatDateTime()

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {

    /**
     * 날짜 포맷 리스트
     */
    const dateList = [
        // '-' 패턴으로 셋팅된 날짜
        { str : '2022-12-28'            , date : formatDate('2022-12-28', '-')          },
        // '/' 패턴으로 셋팅된 날짜
        { str : '2022/11/28'            , date : formatDate('2022/11/28', '/')          },
        // '.' 패턴으로 셋팅된 날짜
        { str : '2022.10.28'            , date : formatDate('2022.10.28', '.')          },
        // 날짜 + 시간으로 셋팅된 날짜
        { str : '2022-12-28 19:30:13'   , date : formatDateTime('2022-12-28 19:30:13')  },
    ];

    /**
     * 날짜 포맷 리스트 table 삽입 코드 생성
     */
    let html  = '';
    dateList.forEach((item) => {
        html += '   <tr>';
        html += '       <td>' + item.str + '</td>';
        html += '       <td>' + item.date + '</td>'; 
        html += '   </tr>';      
    });

    /**
     * table 목록 inner 처리
     */
    document.getElementById('dateTable').querySelector('tbody').innerHTML = html;
});

/**
 * 날짜 format
 */
function formatDate (dateStr, pattern) {

    // dateStr, pattern validation check
    if (!dateStr || !pattern) {
        return '';
    }

    // pattern 기준으로 문자열 split
    const dateArr = dateStr.split(pattern);
    // 0: YYYY, 1: MM, 2: DD
    // month는 -1 해야함
    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2]);
}

/**
 * 날짜 시간 date format
 */
function formatDateTime (dateStr) {
    if (!dateStr) {
        return '';
    }

    const dateSplit = dateStr.split(' ');
    const dateArr = dateSplit[0].split('-');
    const timeArr = dateSplit[1].split(':');

    return new Date(dateArr[0], dateArr[1] - 1, dateArr[2], timeArr[0], timeArr[1], timeArr[2]);
}
</script>

<div>
    <table id="dateTable" border>
        <thead>
            <tr>
                <th>string</th>
                <th>date</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<style>
table {
    table-layout: fixed;
    width       : 500px;
}
</style>

위의 소스 코드는 formatDate, formatDateTime 함수별로 몇가지 패턴별로 호출하는 예제 소스 코드입니다.

 

소스 코드에서 dateList 배열에 포함된 객체들은 각각 str과 date 속성을 가지고 있습니다. 이들 속성들은 formatDate() 함수와 formatDateTime() 함수를 사용하여 날짜 데이터를 다른 형식으로 포맷을 하고 있습니다.

 

'-' 패턴으로 셋팅된 날짜
    - dateStr: '2022-12-28'
    - date 속성에는 formatDate('2022-12-28', '-')가 반환한 Date 객체가 할당됩니다.

'/' 패턴으로 셋팅된 날짜
    - dateStr: '2022/11/28'
    - date 속성에는 formatDate('2022/11/28', '/')가 반환한 Date 객체가 할당됩니다.

 

'.' 패턴으로 셋팅된 날짜
    - dateStr: '2022.10.28'
    - date 속성에는 formatDate('2022.10.28', '.')가 반환한 Date 객체가 할당됩니다.

 

날짜 + 시간으로 셋팅된 날짜
    - dateStr: '2022-12-28 19:30:13'
    - date 속성에는 formatDateTime('2022-12-28 19:30:13')가 반환한 Date 객체가 할당됩니다.

각각의 경우에서 formatDate() 함수와 formatDateTime() 함수가 호출되어 입력된 날짜 문자열을 Date 객체로 변환합니다. 이렇게 변환된 Date 객체가 date 속성에 할당되어 테이블에 표시되는 날짜 데이터가 됩니다. 이렇게 함으로써 다양한 패턴의 날짜 문자열을 쉽게 Date 객체로 변환하여 다른 형식으로 표시할 수 있습니다.

 

실행 결과

 

 

 

---

최종 정리

 

오늘은 자바스크립트에서 날짜 형식을 문자열 패턴에 맞춰 포맷을 변경하는 방법에 대해 정리해 보았습니다. 

서버에서 데이터를 조회할 때 미리 포맷을 맞춰 세팅하는 경우에는 큰 문제가 없지만, 때로는 클라이언트 영역에서 포맷을 변경해줘야 하는 상황이 있을 수 있습니다. 그럴 때 간단한 예제를 통해 정리해 보면서 자바스크립트의 날짜 처리에 대한 이해도를 높일 수 있습니다. 

어려운 문법이 아니라 누구나 쉽게 활용할 수 있는 방법이니 다양한 환경에서 유용하게 활용해보시기 바랍니다.

 

다음에도 더 많은 자바스크립트 관련 주제로 포스팅해 보도록 하겠습니다.

 

감사합니다!