[JavaScript] 날짜 자동 포맷 함수[JavaScript] 날짜 자동 포맷 함수

Posted at 2019. 1. 11. 18:22 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : https://poiemaweb.com/js-date#13-new-datedatestring







웹 프론트 개발중에서는 항상 날짜를 특정한 형태의 포맷으로


화면에 나타내야 하는 경우가 잦다.


그때마다 Date() 함수등을 사용하여 정리하기는 너무 번거로운일이다.


아래 포스팅은 사용자 표현식 함수로 미리 날짜 포맷을 자동으로 맞춰주는 기능이다.





■ YYYY-MM-DD 형식으로 날짜 포맷하기





해당 코드는 기본 날짜값을 년 - 월 - 일 형식으로 바꿔준다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 날짜 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 날짜를 받아온다.

    var toDay = new Date();
    document.getElementById("toYmd").value = toDay.yyyymmdd();
  });

  // 현재 날짜값을 yyyy-mm-dd 형식으로 변환해주는 함수
  Date.prototype.yyyymmdd = function() {
      var yyyy = this.getFullYear().toString();
      var mm = (this.getMonth() + 1).toString();
      var dd = this.getDate().toString();
      return  yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]);
  }
</script>
</head>
<body>
    <h3>금일 날짜는(YYYY-MM-DD)?</h3>
    <input type="text" id="toYmd" style="text-align:center;"/>
</body>
</html>




# 출력 결과











■ HH:MM:SS 형식으로 시간 포맷하기





#01. 00시 ~ 24시 단위로 나타내기




해당 코드는 기본 날짜값을 시 : 분 : 초 형식으로 바꿔준다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
  });

  // 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = this.getHours().toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
  }
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>




# 출력 결과





#02. AM, PM 12시간 단위로 나타내기




위에서 24시간 개념으로 시간을 출력하는것을 만들어 보았다면


이제 오전, 오후로 구분할 수 있는 12시간 개념으로 숫자를 표현해 보고자 한다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
  });

  // 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = (hour = this.getHours().toString() % 12) ? hour : 12;

      hh = hh.toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
  }
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>




# 출력 결과





오전 or 오후, AM or PM을 표기하기 위한 함수는 따로 포스팅을 해두었다.


필요하다면 아래 링크를 참고하면 된다.





관련포스팅 : [JavaScript] 시간이 AM 혹은 PM인지 확인하는 함수












■ 문자형 YYYY-MM-DD HH:MM:SS 형식, DATE 형변환






위에서 YYYY-MM-DD, HH:MM:SS 형식으로 날짜값을 변환하여 출력할 수 있게 만들어 보았다.


그렇지만 개발이란게 꼭 이대로 끝나지 않고.


위와 같이 만든 형태를 다시 날짜형으로 변환 시켜주어야 하는 경우가 꼭 발생한다.


아래 코드를 이용하여 YYYY-MM-DD HH:MM:SS 혁식으로 된 날짜 값을 다시


자바스크립트의 날짜형으로 변환 시켜 보자.



# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 변환 ::</title>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function() {


    // 강제로 YYYY-MM-DD HH:MM:SS 형식으로 날자값을 변수에 담는다.

    var txtDate = "2019-02-14 11:24:32";

    document.getElementById("convertTime").value = dateConvert(txtDate);

  });


  // 문자 YYYY-MM-DD HH:MM:SS값 날짜형으로 형변환

  var dateConvert = function(date) {

      const year = date.substring(0, 4);

      const month = date.substring(5, 7);

      const day = date.substring(8, 10);

      const hour = date.substring(11, 13);

      const minute = date.substring(14, 16);

      const second = date.substring(17, 19);

      const convert = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;

      return new Date( convert );

  }

</script>

</head>

<body>

    <h3>현재 시간은?</h3>

    <input type="text" id="convertTime" style="text-align:center;width:350px;"/>

</body>

</html>




# 출력 결과








반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScrpt] 파일업로드시 확장자 검사하기  (0) 2019.01.23
[JavaScript] 시간이 AM 혹은 PM인지 확인하기  (0) 2019.01.22
[JavaScript] 더블 클릭 이벤트 방지  (0) 2018.12.29
[JavaScript] JavaScript 테스트 방식  (0) 2018.12.25
[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
//

티스토리툴바