Javasript input type date min, max 옵션 주기

아래와 같이 id가 inputDate 인 input type date 태그에 min, max 속성값을 준다.

시작날짜는 현재 날짜의 다음날이고 종료날짜는 오늘날짜의 28일 날짜로 설정하겠다.

 

HTML

<input type="date" id="inputDate">

 

JavaScript

// 시작날짜(min 속성)
let sDate = new Date();
// 종료날짜(max 속성)
let eDate = new Date();

sDate.setDate(sDate.getDate() + 1);     // 시작날짜의 날짜를 +1일 한다.
eDate.setDate(eDate.getDate() + 28);   // 종료날짜의 날짜를 +28일 한다.

let minStr = sDate.toISOString().split('T')[0];
let maxStr = eDate.toISOString().split('T')[0];

$("#inputDate").prop("min", minStr);
$("#inputDate").prop("max", maxStr);

console.log('시작날짜 : ',minStr);
console.log('종료날짜 : ',maxStr);

//결과 (현재날짜 : 2023-02-14)
시작날짜 : 2023-02-15
종료날짜 : 2023-03-14

 

let minStr = sDate.toISOString().split('T')[0];

아래는 toISOString() 함수까지 사용한 내용입니다.

toISOString() 메서드는 ISO 표준을 사용하여 날짜 객체를 문자열로 반환합니다.

표준은 ISO-8601이라고 하며 형식은 YYYY-MM-DDTHH:mm:ss.sssZ입니다.

 

위와 같은 형식에서 split('T') 를 통해 T 기준으로 문자열을 잘라 현재 날짜를 가져옵니다.