본문 바로가기
programming/javascript

자바스크립트 날짜 설정 메서드 사용하기 javascript set Date Methods

by 개코 - 개발과 코딩 2022. 2. 27.

자브스크립트에서 날짜 정보를 개별로 가져올 수 있다면 날짜 정보를 설정할 수도 있다. 날짜 정보를 가져오는 메서드의 앞글자를 get 에서 set로 변경하면 된다. 쉽다. 하지만, 주위할 것은 날짜 정보를 설정시 날짜 인덱스는 0부터 시작한다는 점이다. 날짜범위가 0부터 시작하면 내가 원하는 날짜가 +1 되어 출력되는 결과를 볼 수 있다. 이것만 주의하면 된다.

자바스크립트 날짜 설정 메서드 사용하기
javascript set Date Methods

자바스크립트는 날짜 객체를 사용하여 날짜의 모든 정보를 개별로 가져올 수 있다.

그리고 날짜를 개별로 설정할 수도 있다.

날짜 객체는 사소하게 보이지만 한두번씩은 사용하는 객체이다.

귀찮은 로직을 자주 만들 수도 있기 때문에 공통함수로 자주 만들기도 한다.

날짜 객체를 이용하여 날짜 내용을 개별로 가져오는 내용은 이전 내용을 참고한다.

날짜 설정 메서드

날짜를 설정하는 메서드는 몇가지 종류가 있다.

날짜를 가져오는 메서드와 거의 비슷하지만 앞의 get 이란 단어가 set 이란 단어로 바꼈을 뿐이다.

물론, 날짜에 대한 기본 데이터는 변함이 없다.

날짜 데이터는 무조건 1부터 시작하지 않으며 0부터 설정되는 것들이 있다.

이것만 조심하면 된다.

  • setDate()
    1~31 숫자로 일 정보를 설정한다.
  • setFullYear()
    년도 정보를 설정한다. 월과 일은 옵션으로 생략이 가능하다.
  • setHours()
    0~23 숫자로 시간 정보를 설정한다.
  • setMilliseconds()
    0~999 숫자로 밀리초 정보를 설정한다.
  • setMinutes()
    0~59 숫자로 분 정보를 설정한다.
  • setMonth()
    0~11 숫자로 월 정보를 설정한다.
  • setSeconds()
    0~59 숫자로 초 정보를 설정한다.
  • setTime()
    시간을 설정한다. 1970년 1월 1일 기준 밀리초가 설정된다.

샘플코드

위에서 언급한 날짜 메서드를 가지고 날짜를 설정해 보도록 하는 자바스크립트 예제를 만들어 본다.

날짜 정보를 설정할 때 중요한 것은 날짜의 범위이다.

1부터 시작하지 않고 0부터 시작하는 것들이 있다.

0부터 시작하는 것들은 날짜의 인덱스를 의미하기 때문에 내가 원하는 날짜보다 +1이 된 상태로 나올 수 있다.

<!DOCTYPE html>
<html>
    <body>

        <script>
            
            console.log('----------');

            let vDate;
            let vText;

            // 날짜객체 생성
            vDate = new Date();
            
            vDate.setDate(27);
            console.log(typeof(vDate), "setDate : ", vDate);

            vDate.setFullYear(2022);
            console.log(typeof(vDate), "setFullYear : ", vDate);

            vDate.setFullYear(2022, 02);
            console.log(typeof(vDate), "setFullYear : ", vDate);
            
            vDate.setFullYear(2022, 01);
            console.log(typeof(vDate), "setFullYear : ", vDate);

            vDate.setFullYear(2022, 02, 27);
            console.log(typeof(vDate), "setFullYear : ", vDate);

            vDate.setFullYear(2022, 01, 27);
            console.log(typeof(vDate), "setFullYear : ", vDate);

            vDate.setHours(17);
            console.log(typeof(vDate), "setHours : ", vDate);

            vDate.setMilliseconds(131);
            console.log(typeof(vDate), "setMilliseconds : ", vDate);

            vDate.setMinutes(30);
            console.log(typeof(vDate), "setMinutes : ", vDate);

            vDate.setMonth(2);
            console.log(typeof(vDate), "setMonth : ", vDate);

            vDate.setMonth(1);
            console.log(typeof(vDate), "setMonth : ", vDate);

            vDate.setSeconds(30);
            console.log(typeof(vDate), "setSeconds : ", vDate);

            vDate.setTime(300000000);
            console.log(typeof(vDate), "setTime : ", vDate);
            
            console.log('----------');
            /* */

        </script>

    </body>
</html>

결과화면을 보자.

비교를 위해 추가된 것들이 있기 때문에 코드가 길다.

날짜를 보면 0부터 시작한 것들의 경우 수치가 조금 이상하다.

날짜 기준시는 GMT 기준으로 웹브라우저의 설정 정보를 따른다.

setFullYear, setMonth 가 대표적이다.

분명 2를 설정했는데 3월이 나온다.

이것은 날짜에 대해 인덱스가 0부터 시작하기 때문이다.

반응형

댓글