JS - Date객체와 메서드

테디·2022년 7월 9일
0
post-thumbnail

⏰Date

날짜/시간 객체
자바스크립트에서 제공하는 기본 내장 객체

☘️Date 선언방식

생성자 함수식 선언 방식만 사용
ex) var today = new Date();

특정날짜선언 - 수능날짜 2022년 11월 17일
var test = new Date(2022,12,17) // 1월이 0부터 시작함


🕰️Date의 to 메서드

날짜를 쉽게 읽을 수 있도록 변환하기 위해 사용

toDateString() 날짜를 읽을 수 있는 형태로 변환 ex) Fri Apr 08 2022
toIOSString() toIOSString() ISO 표준을 사용하여 날짜를 문자열로 반환 ex) 2022-04-08T04:22:15.556Z
toJSON() JSON 날짜 형식을 사용하여 날짜를 문자열로 반환 ex) 2022-04-08T04:23:30.409Z
toLocaleDateString() Date의 날짜(시간이 아님)를 문자열로 반환 ex) 2022.4.8
toLocaleTimeString() 날짜의 시간 부분을 문자열로 반환 ex) 오후 1:25:55
toLocaleString() 날짜와 시간을 문자열로 반환 ex)2022.4.8.오후1:26:43
toString() 날짜 객체를 문자열로 반환 ex) Fri Apr 08 2022 13:27:28 GMT+0900(한국 표준시)
toTimeString() 날짜 객체의 시간 부분을 문자열로 반환 ex) 13:28:12 GMT+0900 (한국 표준시)
toUTCString() UTC에 따라 날짜 객체를 문자열로 반환 ex) 2022년 4월 8일 금요일 04:28:58 GMT

📒활용 예시

ex) var today = new Date();
    console.log(today.toLocaleDateString());   // 결과 : 2022.07.09 //현재 날짜
    console.log(today.toLocaleTimeString());   // 결과: 오후 8:20:22 //현재 시간

🕰️Date 객체의 게터(getter)

현재 날짜 시간에 대한 정보를 가져오는 메소드

getFullYear() 4자리 숫자로 연도 가져옴 (yyyy)
getMonth() 월을 숫자로 가져옴(0~11) -1월이 0, 12월이 11로 배당
getDate() 일을 숫자로 가져옴(1~31)
getHours() 시간을 가져옴 (0~23)
getMinutes() 분을 가져옴 (0~59)
getSeconds() 초를 가져옴 (0~59)
getMilliseconds() 밀리초를 가져옴 (0~999)
getTime() 1970년 1월 1일 이후의 밀리초 수를 반환
getDay() 요일을 숫자로 가져옴(0~6) - 일요일이 0, 토요일은 6

📒활용 예시

수능 디데이 구하기 (수능 날짜 2022,11,17)

ex) var dday = new Date(2022,10,17).getTime() // 1월이 0부터 이기 때문에 '10'을 적어줌 
setInterval(function() {
  var today = new Date().getTime(); //getTime를 쓰는 이유는 년,월,일을 밀리초로 변환하기 위함
  var gap = dday - today; 
  // 디데이 날짜에 현재 날짜를 빼줌
  var day = Math.ceil(gap / (1000 * 60 * 60 * 24)); 
  // Math.ceil은 소수값이 존재할 때 값을 올리는 역할을 하는 함수
  // 1초 = 1000(msc)
  // 1분(60초) = 1000 * 60
  // 1시간(60분) = 1000 * 60 * 60
  // 1일(60분 *24) = 1000 * 60 * 60 *24
  var hour = Math.ceil((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var min = Math.ceil((gap % (1000 * 60 * 60)) / (1000 * 60));
  var sec = Math.ceil((gap % (1000 * 60)) / 1000);

document.getElementById("text").innerHTML = "D-DAY까지 " + day + "일 " + hour + "시간 " + min + "분 " + sec + "초 남았습니다.";
}, 1000);

결과

setInterval 를 통해 디데이 시간은 계속 흘러감


🕰️Date 객체의 세터(setter)

현재 날짜 시간에 대한 정보를 세팅하는 메소드

setDate() 날짜를 숫자로 설정(1~31)
setDate() 날짜를 숫자로 설정(1~31)
setFullYear() 연도 설정(선택적으로 월과 일)
setHours() 시간 설정(0~23)
setMilliseconds() 밀리초 설정(0~999)
setMonth() 월 설정(0~11)
setSeconds() 초 설정(0~59)
setTime() 시간 설정(1970년 1월 1일 이후의 밀리초)

📒활용 예시

오늘날짜로부터 14일 후 도서관 반납 창 띄우기

let today = new Date();
today.setDate(today.getDate()+14); // setDate()를 통해 현재날짜 +14로 변경해준다 

document.getElementById('text').innerHTML =
"반납날짜는" + (today.getMonth()+1) + "월" + (today.getDate()) +"일" + "입니다" 

0개의 댓글