[Javascript]자바스크립트에서 날짜 사용법

개요

api를 통해서 날짜 데이터를 전달할 때에는 어떤 값을 넘겨주는 것이 맞는 것일까요?

2021-01-12?

아니면, 밀리초?

---

Javascript 내장 날짜 함수 Date()

Date 객체는 밀리초의 값을 가집니다.

현재 날짜 구하기

const date = new Date();  // Mon Aug 23 2021 12:00:45 GMT+0900 (일본 표준시)

컴퓨터는 날짜 정보의 차이를 날짜 +시간 정보를 밀리세컨드 단위로 변환한 후에 계산을 합니다.

밀리 세컨드는 1/1000초입니다.

let 객체명 = new Date(밀리 세컨드);
let 객체명 = new Date(년,월,일,시,분,초,밀리 세컨드);

let 변수명 = new Date('2020.04.22'); // Mon Apr 22 2019 00:00:00 GMT+0900 (일본 표준시)

 

년 더하기 & 빼기

사용할 함수.

날짜 변수.getFullYear() : 날짜에서 연도만 반환합니다.

날짜 변수.setFullYear() : Date()객체 정보를 변경합니다.

예시 코드.

let date = new Date(2021, 1, 1);
date.setFullYear(date.getFullYear() + 1);
console.log('1년 후... ' + date);
date.setFullYear(date.getFullYear() - 1);
console.log('1년 전... ' + date);

 

달 더하기 & 빼기

사용할 함수.

날짜 변수.getMonth() : 날짜에서 달 정보만 반환합니다. 월은 0부터 시작합니다.

날짜 변수.setMonth() : Date()객체에서 달 정보를 변경합니다.

 

예시 코드.

let date = new Date(2021, 1, 1);
date.setMonth(date.getMonth() + 1);
console.log('1달 후... ' + date);
date.setMonth(date.getMonth() - 1);
console.log('1달 전... ' + date);

 

일 더하기 & 빼기

사용할 함수.

날짜 변수.getDate() : 날짜에서 달 정보만 반환합니다.

날짜 변수.setDate() : Date()객체에서 달 정보를 변경합니다.

 

예시 코드.

let date = new Date(2021, 1, 1);
date.setDate(date.getDate() + 7);
console.log('7일 후... ' + date);
date.setDate(date.getDate() - 7);
console.log('7일 후... ' + date);

vue에서 v-calendar를 사용할 때도 다음처럼 사용할 수 있었습니다.

달력에서 일자를 제한할 때, max-date라는 옵션에 제한할 날짜를 넣습니다.

 

Javascript new Date() 객체 시간 더하기/빼기

new Date().setTime(new Date().getTime() + 9)
//1612396862052

 

 

특정 날짜 d-day 구하기

이걸👇 만들어보겠습니다.

getTime() 함수를 사용해서 밀리초로 변환을 한 후에 - 연산자를 사용해서 계산하면 됩니다.

var start = new Date("2021-05-05:00:00:00+0900");
var end = new Date();
var elapsed = end.getTime() - start.getTime(); // 경과 시간, 밀리초.

이때, 위의 코드의 결과값은 밀리초로 나와서 사람이 보고 바로 숫자를 파악할 수 없습니다. 밀리초 -> 시간, 분, 초 같은 단위로 바꿔주는 편리한 함수가 있을 법하지만, 없습니다. 만들어서 사용해야 합니다.

 

아래 코드가 일, 시간, 분 그리고 초 단위로 환산하도록 하는 코드입니다.

이 코드는 다음 계산법을 통해서 작성했습니다.

1초 = 1,000(milli scd)

1분(60초) = 1,000 * 60

1시간(3,600초) = 1,000 * 60 * 60

1일(86,400초) = 1,000 * 60 * 60 * 24

 

Math.ceil() 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환합니다. 소수점을 올림하고 정수로만 표현하는 방법에 많이 사용되는 함수입니다.

Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4

 

clock.js

function getTime() {
  const xmasDay = new Date("2021-05-05:00:00:00+0900");
  const diffTime = new Date().getTime() - childDay.getTime();
  const time = document.querySelector(".time");
  const day = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  const hour = Math.ceil((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.ceil((diffTime % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.ceil((diffTime % (1000 * 60)) / 1000);

  time.innerText = `${Math.abs(day) < 9 ? `0${Math.abs(day)}` : `${Math.abs(day)}`}d ${Math.abs(hour) < 9 ? `0${Math.abs(hour)}` : `${Math.abs(hour)}`}h ${Math.abs(minutes) < 9 ? `0${Math.abs(minutes)}` : `${Math.abs(minutes)}`}m${Math.abs(seconds) < 9 ? `0${Math.abs(seconds)}` : `${Math.abs(seconds)}`}s`;  
}

function init() {
  setInterval(getTime, 1000);
}

 

 

자바스크립트에서 날짜나 시간과 관련된 작업을 할 때, 사용하면 편한 라이브러리가 있습니다.

moment.js와 day.js 입니다.