datetime-local issue

위와 같이 input tag를 통해서 date와 time을 함께 입력받는 기능을 개발중에 많은 삽질을 했다. 이번 포스팅에서는 해당 이슈와 삽질에 대해 정리 해보고자 한다.

우선 만난 이슈는 다음과 같다.

1. 데이터가 저장될 MySQL의 타임존과 실제 클라이언트의 타임존이 다르다.
2. datetime-local은 이름에서도 알 수 있듯이 클라이언트 타임존을 기준으로 동작한다.
3. datetime-local의 value 형식은 2020-03-26T10:11와 같이 YYYY-MM-DDThh:mm 형태이다.

위와 같은 이슈 외에도 서버에서 Date 객체를 통으로 넘겨줘서 input tag value에 Wed Mar 25 2020 01:20:00 GMT+090와 같은 toString 형태로 들어가서 문제점을 찾는 데 한참 걸렸다.

어찌됬든 이슈를 요약하자면 서버 클라이언트간의 타임존 불일치 및 date format 불일치이다. 이 문제는 moment.js를 통해 단순하게 해결 할 수 있다.

우선 서버쪽에서 datetime을 담아줄 때 ISO 형식으로 담아둔다. 이후 해당 ISO String값을 기준으로 moment.js를 이용해 date format을 datetime-local 형식으로 맞춰줌으로서 이슈를 해결하였다.

ISO는 UTC 기준 시간대이며, 끝의 Z 접미사가 붙는다.
Time Zone에 대해 보다 자세하게 알고싶다면 자바스크립트에서 타임존 다루기 (1)를 참고하자.

ISO 형식으로 변환

if(value instanceof Date){
  this.value = value.toISOString();
}

date format을 맞춰주는 코드

formatDatetime = () => {
    let nodes = document.querySelectorAll('input[type=datetime-local]');

    nodes.forEach(node => {
        moment.DATETIME_LOCAL = "YYYY-MM-DDThh:mm:ss";
        let localDate = moment(node.getAttribute("value"));
        node.value = localDate.format(moment.DATETIME_LOCAL);
    })
};