js

JS - Date 객체

3월 15, 2019
Date 객체를 이용하면 날짜와 시간을 다룰 수 있습니다. set... 으로 시작하는 메서드는 값을 설정하고, get... 으로 시작하는 메서드는 값을 얻어 옵니다.

객 체 설 명
new Date() 날짜를 생략하면 현재 날짜를 갖는 객체를 만듬.
(밀리 초는 1/1000(초)입니다.)
Ex.1) new Date(연, 월, 일, 시, 분, 초, 밀리 초);
Ex.2) new Date("December 9, 2019");
Ex.3) new Date("December 9, 2019, 10:35:42");

Date 객체에 매개변수를 생략하면 현재 날짜와 시간을 얻을 수 있으며 아래 표를 이용해 원하는 값을 얻을 수도 있습니다.

메서드 설 명
getYear()
setYear()		 2자리 년도
Ex.) 19
getFullYear()
setFullYear()		 4자리 년도
Ex.) 2019
getMonth()
setMonth()		 월. 0 ~ 11 형식
월은 하나가 작은 숫자로 반환
Ex.) getMonth() + 1
getDate()
setDate()		 일. 1 ~ 31 형식
getDay()
setDay()		 요일. 0 ~ 6 형식
  • 0: 일요일
  • 1: 월요일
  • 2: 화요일
  • 3: 수요일
  • 4: 목요일
  • 5: 금요일
  • 6: 토요일
getHours()
setHours()		 시. 0 ~ 23 형식
getMinutes()
setMinutes()		 분. 0 ~ 59 형식
getSeconds()
setSeconds()		 초. 0 ~ 59 형식
getMilliseconds()
setMilliseconds()		 밀리 초. 1/1000초
getTime()
setTime()		 타임스탬프 형식
Ex.) 1553491194438
toLocaleString() 로컬 형식 전체 문자열
Ex.) 2019. 03. 15. 오후 1:23:56
toLocaleTimeString() 로컬 형식 시간 부분 문자열
Ex.) 오후 1:51:26
toLocaleDateString() 로컬 형식의 날짜 부분 문자열
Ex.) 2019. 3. 25.
toGMTString() GMT 형식 문자열
EX.) Tue, 15 Mar 2019 04:23:02 GMT
toTimeString() DATE 객체의 시간 부분 문자열
toUTCString() DATE 객체의 날짜 + 시간 문자열
Ex.) Mon, 25 Mar 2019 04:51:26 GMT
toString() 날짜 객체를 문자열로 반환

이 예제는 객체에 원하는 날짜로 초기화한 결과입니다.

<script>
document.write( new Date(2019, 11) + "<br/>");
// Sun Dec 01 2019 00:00:00 GMT+0900 (한국 표준시)

document.write( new Date(2019, 11, 25) + "<br/>");
// Wed Dec 25 2019 00:00:00 GMT+0900 (한국 표준시)

document.write( new Date(2019, 11, 25, 10, 35, 23) + "<br/>");
// Wed Dec 25 2019 10:35:23 GMT+0900 (한국 표준시)

// 1000 은 1/1000초 이므로 23 + 1(초) = 24(초)의 값을 얻음
document.write( new Date(2019, 11, 25, 10, 35, 23, 1000) + "<br/>");
// Wed Dec 25 2019 10:35:24 GMT+0900 (한국 표준시)
</script>

다음의 형식도 가능합니다.

<script>
document.write( new Date("December 9, 2019") + "<br/>");

document.write( new Date("December 9, 2019 11:35:42") + "<br/>");
</script>

이제 메서드를 이용해 원하는 부분의 값을 얻어오겠습니다.

<script>
var date = new Date;
document.write( date + "<br/>");
// Mon Mar 25 2019 13:51:26 GMT+0900 (한국 표준시)

document.write( date.toTimeString() + "<br/>");
// 13:51:26 GMT+0900 (한국 표준시)

document.write( date.getFullYear() + "<br/>");
// 2019

document.write( date.getMonth() + 1 + "<br/>");
// 3

document.write( date.getDate() + "<br/>");
// 25

document.write( date.getDay() + "<br/>");
// 1

document.write( date.getHours() + "<br/>");
// 13

document.write( date.getTime() + "<br/>");
// 1553489486678

document.write( date.toLocaleString() + "<br/>");
// 2019. 3. 25. 오후 1:51:26

document.write( date.toLocaleTimeString() + "<br/>");
// 오후 1:51:26

document.write( date.toLocaleDateString() + "<br/>");
// 2019. 3. 25.

document.write( date.toGMTString() + "<br/>");
// Mon, 25 Mar 2019 04:51:26 GMT

document.write( date.toUTCString() + "<br/>");
// Mon, 25 Mar 2019 04:51:26 GMT
</script>

원하는 날짜를 설정하는 방법은 매우 간단합니다. 아래 예시는 현재 월에 1을 더하거나 2를 뺀 결과입니다.

<script>
var date = new Date;
document.write( date + "<br/>");
// Mon Mar 25 2019 16:01:18 GMT+0900 (한국 표준시)

// 현재 날짜에서 1(월)을 더합니다. 
date.setMonth( date.getMonth() + 1 );
document.write( date );
// Thu Apr 25 2019 16:01:18 GMT+0900 (한국 표준시)

// 현재 날짜에서 2(월)을 뺍니다.
date.setMonth( date.getMonth() - 2 );
document.write( date );
// Mon Feb 25 2019 16:01:18 GMT+0900 (한국 표준시)
</script>


달력 예제

이러한 메서드를 이용하면 달력을 구현할 수 있습니다.

<script>
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) {
  this[0] = m0;
  this[1] = m1;
  this[2] = m2;
  this[3] = m3;
  this[4] = m4;
  this[5] = m5;
  this[6] = m6;
  this[7] = m7;
  this[8] = m8;
  this[9] = m9;
  this[10] = m10;
  this[11] = m11;
}

function calendar(){
  var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
  var today = new Date();
  var thisDay;
  var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

  year = today.getYear() + 1900;
  thisDay = today.getDate();

  if(((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)){
    monthDays[1] = 29;
  }

  nDays = monthDays[today.getMonth()];
  firstDay = today;
  firstDay.setDate(1);
  testMe = firstDay.getDate();
  if(testMe == 2){
    firstDay.setDate(0);
  }
  startDay = firstDay.getDay();

  document.writeln("<center>");
  document.write("<table border>");
  document.write("<tr><th colspan=7>");
  document.write(monthNames.substring(today.getMonth() * 3, (today.getMonth() + 1) * 3));
  document.write(". ");
  document.write(year);
  document.write("<tr><th>Sun<th>Mon<th>Tue<th>Wed<th>Thu<th>Fri<th>Sat");
  document.write("<tr>");

  column = 0;

  for (i=0; i<startDay; i++) {
    document.write("<td>");
    column++;
  }

  for (i=1; i<=nDays; i++) {
    document.write("<td>");

    if (i == thisDay) {
      document.write("<font color=\"#FF0000\">")
    }
    document.write(i);

    if (i == thisDay) {
      document.write("</font>")
    }
    column++;

    if(column == 7) {
      document.write("<tr>"); 
      column = 0;
    }
 }
 document.write("</table>");
 document.writeln("</center>");
}

calendar();
</script>


Tag:

0 Comments

0 댓글