[JS, JQuery] 일자 여러개 입력받을 때 오늘 이후만, 중복 없이, 오름차순으로 입력받도록 input value range 세팅하기

아래와 같이 일자를 여러개 입력받아야 하는데, 

오늘 이후만 입력받아야 하고, 중복이 없어야 하며, 오름차순으로 입력할 수 있도록 유도해야 했다. 

 

input 태그의 min, max 속성을 사용하여 선택할 수 없는 날짜를 disable 처리 했다. 

input의 value가 바뀌거나 일자가 삭제되면 모든 input의 min, max 속성을 다시 세팅했다. 

 

만약 input이 하나라면 min은 오늘 날짜이고 max는 '2999-12-31'으로 설정했다. 

input이 여러개일 때는, 

첫번째 input이라면 min은 오늘 날짜이고 max는 다음 input value에 하루를 뺀 값으로 설정했다. 

마지막 input이라면 min은 이전 input value에 하루를 더한 값이고 max는 '2999-12-31'으로 설정했다. 

나머지 input들은 min은 이전 input value에 하루를 더한 값, max는 다음 input value에 하루를 뺀 값으로 설정했다. 

/**
 * Desc : date input range 세팅
 */
function setSessionDateInputRange(){
   let minDate = getTodayDateStr();
   let maxDate;

   $('input[name=sessionDate]').each((index, element) => {
       let inputSessionDate = $(element).val();
       let nextSessionDate = $('input[name=sessionDate]').eq(index + 1).val();
       maxDate = nextSessionDate ? addDaysToDateStr(nextSessionDate, -1) : '2999-12-31';

       $(element).attr('min', minDate);
       $(element).attr('max', maxDate);

       minDate = addDaysToDateStr(inputSessionDate, 1);
   })
}

/**
 * Desc : 오늘 일자 문자열 반환
 */
function getTodayDateStr(){
    let today = new Date();
    let year = today.getFullYear();
    let month = (today.getMonth() + 1).toString().padStart(2, '0');
    let day = today.getDate().toString().padStart(2, '0');

    return `${year}-${month}-${day}`;
}

/**
 * Desc : n일 더한 문자열 반환
 */
function addDaysToDateStr(dateStr, plusDays){
    const date = new Date(dateStr);
    date.setDate(date.getDate() + plusDays);

    return date.toISOString().split('T')[0];
}

 

그러면 아래와 같이 앞뒤 input value에 따라 선택할 수 있는 범위가 세팅된다!