자바스크립트 yyyyMMdd 변환

서버에서 json response를 받을 때 날짜가 "YYYY-MM-DDThh:mm:ss" (LocalDateTime) 형식으로 온다는 가정하에 한국 시간 기준 yyyyMMdd 등의 포맷으로 바꿔주는 공통 함수를 만들어 보자.

 

굉장히 무식하고 단순한 방법이지만 Frondend에서는 yyyyMMdd로 표시할 때도 있고, yyyy-MM-DD로 표시하거나 yyyyMMdd hh:mm:ss 등 다양하게 표시가 되기 때문에 서버에서는 항상 LocalDateTime으로 내려주고 필요에 따라 front에서 변환을 하는 것이 조금 더 편리했다.

 

서버 응답 데이터

created_date: "2023-04-29T08:46:23.000+00:00"

 

한국 표준시로 변환

서버의 데이터를 javascript에서 new Date로 생성하면 아래와 같이 한국 표준시로 나온다. 

Sat Apr 29 2023 17:46:23 GMT+0900 (한국 표준시)

 

 

공통함수 - common.js 

아래 함수들을 공통으로 만들어 두고 HTML 화면에서 필요한 함수를 호출해서 사용한다.

 

 

10보다 작은 수 앞에 0을 붙여주는 공통 함수 

function d2(n) {
	if(n<=9) return "0"+n;
	return n;
}

Javascript의 date 형식으로 변환 후 출력 해 보면 10보다 작은 수는 1,2,3.. 이런 식으로 나오니 앞에 0을 붙여서 포맷을 통일시킨다.

 

 

yyyy.MM.dd 형식

function getKSTDateYYYYMMDD(tdata){
	var d;
	if(tdata != null){
		d = new Date(tdata);
	}else{
		d = new Date();
	}
	
	return d.getFullYear() + "." + d2(d.getMonth() + 1) + "." + d2(d.getDate());
}

년월일만 출력한다. 

중간에 .이든 -이든 원하는 걸로 바꾸면 끝

 

yyyy.MM.dd hh:mm 형식

function getKSTDateYYYYMMDDHHMM(tdata){
	var d;
	if(tdata != null){
		d = new Date(tdata);
	}else{
		d = new Date();
	}
	
	return d.getFullYear() + "." + d2(d.getMonth() + 1) + "." + d2(d.getDate()) +  " " + d2(d.getHours()) + ":" + d2(d.getMinutes());
}

년월일에 시분까지 출력

 

yyyy.MM.dd hh:mm:ss 형식

function getKSTDateYYYYMMDDHHMMSS(tdata){
	var d;
	if(tdata != null){
		d = new Date(tdata);
	}else{
		d = new Date();
	}
	
	return d.getFullYear() + "." + d2(d.getMonth() + 1) + "." + d2(d.getDate()) +  " " + d2(d.getHours()) + ":" + d2(d.getMinutes()) + ":" + d2(d.getSeconds());
}

년월일에 시분초까지 출력

 

 

화면 - HTML & jQuery

HTML을 그려주는 스크립트

function draw_table(list){

    // list.data는 서버에서 응답받은 JSON Array

    for(var i = 0 ; i < list.data.length; i++){
        var listHTML = "";

        listHTML += "<tr>";
        listHTML += "  <td>" + list.data[i].title + "</td>";
        listHTML += "  <td>" + getKSTDateYYYYMMDDHHMM(list.data[i].created_date) + "</td>";
        listHTML += "</tr>";

        $("#board_list").append(listHTML);
    }


    if(list.data.length == 0){
        $("#board_list").append("<tr><td colspan=" + $("#thead").children().length + ">조회된 결과가 없습니다.</td></tr>");
    }
}

서버에서 받아온 json array "list.data"를 for문으로 돌면서 Target Table(여기서는 id="board_list")에 변환된 날짜 형식과 함께 출력한다. 

 

HTML 코드

<div class="row">
  <div class="table-responsive">
    <table class="table">
      <caption id="total_element"></caption>
      <thead>
        <tr id="thead">
          <th style="min-width:40vw;">제목</th>
          <th>등록일</th>
        </tr>
      </thead>
      <tbody id='board_list'></tbody>
    </table>	
  </div>
</div>

 

 

결과물

이렇게 리스트에 원하는 날자형식을 출력해 줄 수 있다.