안녕하세요. 명월입니다.
이 글은 Javascript에서 날짜 포맷 설정하는 방법(moment 라이브러리)에 대한 글입니다.
웹에서 날짜 포맷을 설정하는 방법은 웹서버에서 설정해서 표시하는 방법과 클라이언트(브라우저)에서 설정하는 방법이 있습니다. 웹 요청(Web request)로 날짜를 표시하는 방법에 대해서는 그냥 웹서버에서 해야하지만 ajax로 날짜 데이터를 받거나 클라이언트 내에서 날짜 포맷을 설정하는 경우에는 Javascript로 처리해야합니다.
링크 - [C#] 날짜 포맷
링크 - [Java] 날짜 포멧 설정(SimpleDateFormat)
기본적으로 Javascipt로 날짜를 표시하면 다음과 같이 표시됩니다.
저같은 경우는 PC OS가 일본어 버젼이라 Japan standard로 표시되네요.
사실 위처럼 표시되면 일반적으로 알아보기 힘듭니다. 보통은 「yyyy/mm/dd hh:mm:ss」 로 표시하는게 일반적입니다.
이런 날짜 포맷을 직접 코딩해서 바꾸는 방법도 있지만, 그렇게 하기에는 귀찮으니 라이브러리를 쓰도록 합니다. 날짜 관련 라이브러리는 moment입니다.
링크 - https://momentjs.com
직접 js를 다운로드에서 사용하는 방법도 있습니다만 트래픽과 웹 페이지 성능을 위해서 cdn으로 사용하도록 합시다.
cdn - https://cdnjs.com/libraries/moment.js/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p class="dateview1"></p>
<p class="dateview2"></p>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
var date = new Date();
$('.dateview1').html(moment(date).format('YYYY MM DD HH:mm:ss'));
$('.dateview2').html(moment('2019-08-10').format('YYYY MM DD HH:mm:ss'));
</script>
</body>
</html>
moment 함수에 데이터를 넣는데 Date 타입도 허용되고 String 타입도 허용됩니다.
| 날짜 포맷 | |
| 포맷 | 예제 |
|---|---|
| moment().format('MMMM Do YYYY, h:mm:ss a') | |
| moment().format('dddd') | |
| moment().format("MMM Do YY") | |
| moment().format('YYYY [escaped] YYYY') | |
| moment().format() | |
| 날짜 차이 | |
| moment("20111031", "YYYYMMDD").fromNow() | |
| moment("20120620", "YYYYMMDD").fromNow() | |
| moment().startOf('day').fromNow() 「오늘 지나간 시간」 | |
| moment().endOf('day').fromNow() 「오늘 남은 시간」 | |
| moment().startOf('hour').fromNow() 「시간 내 지나간 분」 | |
| 달력 포맷 | |
| moment().subtract(10, 'days').calendar() | |
| moment().subtract(6, 'days').calendar() | |
| moment().subtract(3, 'days').calendar() | |
| moment().subtract(1, 'days').calendar() | |
| moment().calendar() | |
| moment().add(1, 'days').calendar() | |
| moment().add(3, 'days').calendar() | |
| moment().add(10, 'days').calendar() | |
| 지역화(나라별 포맷) | |
| moment.locale() | |
| moment().format('LT') | |
| moment().format('LTS') | |
| moment().format('L') | |
| moment().format('l') | |
| moment().format('LL') | |
| moment().format('ll') | |
| moment().format('LLL') | |
| moment().format('lll') | |
| moment().format('LLLL') | |
| moment().format('llll') | |
위 테이블 예제는 제가 setInterval함수를 이용해서 실시간으로 표시했습니다. 실제로는 위처럼 실시간으로 시간이 흐르지 않습니다.
지역화의 경우는 en으로 표시가 되어있는데 이는 시스템의 표시형식이 아닌 라이브러리 참조에 따라 바뀝니다.
cdn 리스트를 접속해 보면 locale 파일이 있는데 이를 참조하면 지역위치가 바뀝니다.
참조 파일 - 
test.html
여기까지 날짜 포맷 설정하는 방법(moment 라이브러리)에 관한 내용였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] Full calendar(스케줄 달력)의 사용법 (0) | 2021.07.15 |
|---|---|
| [Javascript] 그래프 오픈 라이브러리(jqplot) (0) | 2020.02.24 |
| [Javascript] 브라우져 화면 캡쳐 라이브러리(html2canvas) (0) | 2019.11.22 |
| [Javascript] Select2 (Select searching, multiselect, ajax) (0) | 2019.08.27 |
| [Javascript] 알람 메시지 라이브러리(toastr 라이브러리) (0) | 2019.08.21 |
| Google OAuth 사용법 (0) | 2019.06.18 |
| [CSS] 구글 폰트 (Google font) 이용하기 (0) | 2019.05.31 |
| JqGrid (0) | 2015.07.14 |