input type date의 날짜 비교

<input type="date">

<input> 태그의 date 타입을 document.getElementById().value 로 값을 가져오면

yyyy-mm-dd 의 형태로 값을 가져온다.

 

 js의 new Date() 함수를 사용해서 현재시간을 구하면 yyyy-mm-dd 형식이 아닌 다른 형식으로 date값이 저장된다.

 

때문에 <input type="date">의 값을 가져와서 js의 new Date()와 비교하기 위해선

 

파싱을 해줄 필요가 있겠다.

function getFormatDate(date){
    var year = date.getFullYear();              //yyyy
    var month = (1 + date.getMonth());          //M
    month = month >= 10 ? month : '0' + month;  //month 두자리로 저장
    var day = date.getDate();                   //d
    day = day >= 10 ? day : '0' + day;          //day 두자리로 저장
    return  year + '-' + month + '-' + day;       //'-' 추가하여 yyyy-mm-dd 형태 생성 가능
}

파싱을 위한 함수 선언

 

	let offerdate = document.getElementById("offerdate").value; // input date 값 가져오기
	let date = new Date(); //현재시간
	let minDate = getFormatDate(date); 
	
	date.setDate(date.getDate() + 90);
	let maxDate = getFormatDate(date);

현재시간인 minDate와 90일 후인 maxDate이다.

---

	if (offerdate < minDate) {
		toastr.options.preventDuplicates = true;
		toastr.warning("오늘 이후의 날짜를 선택해주세요");
		$("#offerdate").focus();

		return false;
	}
    
    
	if (offerdate > maxDate) {
		toastr.options.preventDuplicates = true;
		toastr.warning("+90일까지 설정 가능합니다.");
		$("#offerdate").focus();

		return false;
	}

input date로 선택한 시간의 범위를 지정해주기 위해 minDate와 maxDate 이용해서 현재시간 기준으로 날짜 비교를 했다.

 

 

출처 : https://kimfk567.tistory.com/104