input date로 받아온 날짜는 String형의 yyyy-MM-dd와 같은 형식이다. 같은 형식의 날짜 값끼리는 부등호를 이용해 비교가 가능하다.
ex) input date로 받아온 두 날짜 사이에서 >, < 를 이용해 비교 가능함
아래는 yyyy-MM-dd 로 받아온 날짜를 date형식으로 변환하는 함수이다.
// date 날짜 계산
function calcDate(dateData) {
const year = dateData.split('-')[0];
const month = dateData.split('-')[1] - 1;
const date = dateData.split('-')[2];
return new Date(year, month, date);
}
사용자에게 아래처럼 날짜를 2개 입력하도록 하고, 2개 날짜의 차이는 7일 이하로 설정하도록 했다.
우선 순서 상관없이 앞선 날짜를 startDate, 이후 날짜를 endDate 변수에 담았다.
그리고 calcDate 함수를 이용해 날짜로 변환 후 두 날짜 사이가 7일 이상일 경우 알림창을 띄우도록 했다.
function checkDate() {
let startDate = document.querySelector('.start-date').value;
let endDate = document.querySelector('.end-date').value;
// 앞선 날자를 startDate, 이후 날짜를 endDate에 담기
if (endDate < startDate) {
let temp = startDate;
startDate = endDate;
endDate = temp;
}
// 두 여행 날짜 차이 7일 이하여야함
const dateDiff = (calcDate(endDate) - calcDate(startDate)) / (1000 * 60 * 60 * 24);
if(dateDiff > 6) {
alert('여행 일정은 7일 까지만 설정 가능합니다.');
document.querySelector('.end-date').focus();
return;
}
}
참조
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
JS - [ 자식 Element에 Event 전파 막기 ] (0) | 2022.07.22 |
---|---|
JS - [ js 파일 수정사항 브라우저에 바로 반영] (0) | 2022.07.08 |
JS - [input 태그 엔터키 눌렀을 때 이벤트] (0) | 2022.07.03 |
JS - [ 모달 데이터 전달 ] (0) | 2022.07.03 |
JS - [ parentNode parentElement 차이 ] (0) | 2022.06.30 |