[JavaScript] DateTime 을 AM/PM 포맷으로 변환하는 법 / AMPM 시간 변환

JavaScript로 DateTime 을 AM/PM 포맷으로 변환하는 방법

환 / 오전, 오후 포맷 / time format

1. 문제 발생

 채팅 기능을 구현할 때 신경 써주어야 할 부분들이 정말 많았다. 익숙하게 써오던 카카오톡을 다시 보게 되는 나날이다. 이번에 발생한 문제는 채팅 메세지를 전송한 시점 표시이다.

채팅 메세지 전송 시간 표시

 목표는 위와 같이 오전, 오후 (혹은 AM, PM)로 표현하고 싶었다. 하지만 서버로부터 받아오는 데이터는 당연하게도 이렇게 생기지 않았다. 주로 "1663244470791"와 같은 밀리세컨드 단위 timestamp나 혹은 이번 경우처럼 "2022-09-15 01:23:13"와 같이 전달받을 때도 있다. 다음부터는 당황하지 않도록 기록해두려고 한다. 함수로 만들어 보자.

 

2. 문제 해결 과정

 사실 상 시간 포맷 변환 같은 경우 많은 자료가 있다. 대부분 비슷한 방법이었지만 두 가지로 간추렸다.

 

직접 계산하기

const formatAMPM = (date) => {
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let ampm = hours >= 12 ? "오후" : "오전";
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes.toString().padStart(2, "0");
    let strTime = ampm + " " + hours + ":" + minutes;
    return strTime;
  };
  
console.log(formatAMPM(new Date(2022, 9, 16)));

 new Date()를 이용하여 msec 단위의 시간으로 변환하여 getHours(), getMinutes() 등의 인스턴스 메서드를 이용하여 하나씩 구하는 방법이다. ampm 부분은 원래 PM과 AM이었는데 오전과 오후로 커스터마이징하였다. 간단한 방법으로 시간 관련 format을 하는 로직을 엿볼 수 있었다. 하지만 보다시피 코드가 너무 길고 지저분하다.

 

toLocaleString 이용하기

 두 번째 방법으로는 자바스크립트에 내장되어 있는 함수를 이용하는 것이다. 그 함수는 바로 toLocaleString() 이다. 이것을 이용하면 다음과 같이 더 간결한 코드로 같은 기능을 구현할 수 있다.

const event = new Date("2022-09-15 01:23:13");

console.log(
    event.toLocaleString("ko-KR", {
      hour: "numeric",
      minute: "numeric",
      hour12: true,
    })
  );
    
// 예상 출력 > "오후 4:23"

 

  위와 같이 option으로 hour, minute은 'numeric'으로, hour12를 true로 주면 '오후 3:02'과 같이 출력된다. AM이나 PM으로 출력하고 싶다면 'ko-KR'을 'en-US'로 바꿔주면 된다. 자세한 사항은 Date.prototype.toLocaleString() 에서 볼 수 있으며 "Try it" 부분에서 테스트도 해볼 수 있다.

 

3. 결론

 이 포스팅처럼 시간 포맷과 관련하여 정리해두면 나중에 또 찾게 될 일이 있을 것 같다. 추가적으로 시간 포맷과 관련된 다른 내용들도 추가해야겠다. 따로 정리해두었던 "경과 시간 계산하기"부터 해야겠다.

 

참조

https://thewebdev.info/2022/03/23/how-to-display-javascript-datetime-in-12-hour-am-pm-format-2/

http://www.devdic.com/javascript/refer/native/method:1344/toLocaleString()