[JS] toISOString() 사용하여 시작날짜 선택 시 마침날짜 2주뒤로 자동계산되게 하기

발행예정일을 선택하면 입금예정일이 자동으로 2주뒤로 설정되도록 JS로 구현하려고 한다.

<tr>
    <th>발행예정일</th>
    <td><input id="sales_pblDueDate" name="pblDueDate" type="date" class="ipt_date hasDatepicker" maxlength="10" max="9999-12-31"></td>
</tr>
<tr>
    <th>입금예정일</th>
    <td class="radio_alg">
        <input id="sales_rcpmnyDueDate" name="rcpmnyDueDate" type="date" class="ipt_date hasDatepicker" maxlength="10" max="9999-12-31">
    </td>
</tr>

 

// 발행예정일의 날짜가 변경될 때 실행될 함수입니다.
document.getElementById('sales_pblDueDate').addEventListener('change', function() {
    var pblDueDate = this.value; // 발행예정일의 값을 가져옵니다.
    var pblDueDateObj = new Date(pblDueDate); // 날짜 객체로 변환합니다.

    // 입금예정일을 발행예정일로부터 2주 뒤로 설정합니다.
    pblDueDateObj.setDate(pblDueDateObj.getDate() + 14); // 14일을 추가합니다.

    // 입금예정일 input 요소에 날짜를 설정합니다.
    // toISOString을 사용하여 날짜를 YYYY-MM-DD 형식의 문자열로 변환하고, 날짜 부분만 잘라내어 사용합니다.
    document.getElementById('sales_rcpmnyDueDate').value = pblDueDateObj.toISOString().split('T')[0];
});

 

addEventListener 함수를 사용하여 발행예정일 입력필드의 변경사항을 감지하고, 해당 날자에서 14일을 더하여 입금예정일 필드에 설정한다.

 

이때 , toISOString 메서드와 split함수를 사용하여 날짜 형식을 YYYY-MM-DD로 변환한다.

 

 

 

.

.

 

toISOString() 는 Date 를 ISOString(yyyy-mm-ddThh:mm:ss) 형식의 문자열로  변환해주는 함수이다.

그런데 이 함수를 사용하면 날짜가 하루 전 날짜가 찍힌다.

이유는 이 함수가 우리나라 Time Zone 이 아니라 UTC 타임존(zero offset) 을 사용하기 때문이다.

 

대한민국 offset을 수동으로 추가해준 뒤 ISOString함수를 실행시키는 것

let offset = date.getTimezoneOffset() * 60000; //ms단위라 60000곱해줌
let dateOffset = new Date(date.getTime() - offset);
  
console.log(dateOffset.toISOString());

 

 

 

 

사용예시 : T 기준으로 split하면 년월일로 자를 수 있다.

var d= new Date(); // 출력형태 Tue Feb 07 2020 23:25:32 GMT+0900 (KST)

var ISOData = d.toISOString(); // 출력형태 2020-02-06T13:39:45.148Z

//var ISODate = ISOData.split("T",1); // 출력형태 2020-02-06

 

 

.

.

 

 

https://anywaydevlog.tistory.com/46

[javascript] toISOString() 1일 전 날짜가 뜨는 이유 및 해결법 (UTC 타임존 zero offset 이슈)

블로그참조.