[Error] Troubleshooting :: JavaScript에서 getMonth(), getDate()로 얻은 날짜는 두자리수 고정이 아니다.

❓ Problem: JavaScript에서 getMonth(), getDate()로 얻은 날짜는 두자리수 고정이 아니다.

12월에 나는 스프링 프로젝트로 놀이공원 웹사이트를 만들었다.

그중 페스티벌을 추가/수정할 수 있는 기능이 있는데, 페스티벌에는 시작일과 종료일을 선택할 수 있다.

페스티벌 추가 시, 시작일이 오늘 이후로만 가능하게끔 유효성 검사 처리를 했었는데 12월에 개발 당시에는 멀쩡히 작동하던 유효성 검사가 1월이 되니 작동하지 않는다.

오늘 날짜는 2024-01-08이나, 오늘 보다 과거의 날짜도 선택이 가능하다..ㅠㅠ

 

Error 발생 원인 1: input<type="date">의 value는 월 또는 일이 10 미만이어도 두자리수 고정이다.(일의 자리의 경우 항상 앞에 0이 붙는다.)
Error 발생 원인 2: JavaScript의 Date 객체가 제공하는 get 함수는 월 또는 일이 10 미만이면 한자리수를 반환한다.

 

쩝. 자바스크립트의 Date 객체가 제공하는 get함수의 특징을 제대로 이해하지 못하고 사용하여 초래한 결과다..!!!

 

개발 당시에도 1월은 한자리수로 나올까? 두자리수로 나올까? 생각은 했지만 미처 검증하진 못했는데 1월이 되어 프로젝트를 열어보니 해당 문제가 수면위로 올라왔다.

 

기존 코드(jsp 파일 상단 HTML 부분)

<!-- 공연 시작일 -->
<div class="row mb-3">
    <label for="start_date" class="col-sm-2 col-form-label required">공연 시작일</label>
    <div class="col-sm-10">
        <input type="date" id="start_date" name="start_date" class="form-control" required>
    </div>
</div>

<!-- 공연 종료일 -->
<div class="row mb-3">
    <label for="end_date" class="col-sm-2 col-form-label required">공연 종료일</label>
    <div class="col-sm-10">
        <input type="date" id="end_date" name="end_date" class="form-control" required>
    </div>
</div>

 

기존 코드(jsp 파일 하단 Script 부분)

//날짜 입력 유효성 검사
const start_date = document.getElementById('start_date');

const now = new Date();
const nowStr = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();


$('#start_date').attr('min', nowStr);//시작일은 최소 오늘 이후

function isValidEndDate() {
 $('#end_date').attr('min', start_date.value);
}

$('#start_date').change(function() {
 isValidEndDate();
});

 

개발 당시인 12월 중순~말은 월/일 모두 2자리 수라 유효성 검사가 제대로 작동했지만, 1월 8일인 지금은 제대로 작동하지 않아 콘솔로 nowStr을 찍어보니 '2024-1-8'이 나온당..

console.log(nowStr); //2024-1-8

 

또한 input<type="date">의 value는 월 or 일이 10 미만이어도 항상 두자리수를 가짐을 아래와 같이 확인할 수 있다.

//input<type="date"> value 자리수 확인
$('#start_date').change(function() {
    console.log($('#start_date').val());
});

 

 

❗ Solution

기존 코드에서 nowStr을 start_date의 min으로 잡는데 형식이 달라서 적용되지 않으니, nowStr을 선언하는 부분을 아래와 같이 수정하여 형식을 통일해주자!

• 월 또는 일이 10 이상이면 월 or 일 그대로 사용하기
• 월 또는 일이 10 미만이면 월 or 일 앞에 '0' 추가하기 

 

수정한 코드

//날짜 입력 유효성 검사
const start_date = document.getElementById('start_date');

const now = new Date();

const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();

const nowStr = `\${year}-\${month >= 10 ? month : '0' + month}-\${date >= 10 ? date : '0' + date}`;

console.log('nowStr: ' + nowStr); //nowStr: 2024-01-09

$('#start_date').attr('min', nowStr);//시작일은 최소 오늘 이후

function isValidEndDate() {
    $('#end_date').attr('min', start_date.value);
}

$('#start_date').change(function() {
    isValidEndDate();
});

 

 

아주 잘 적용된당!!

 

⚠주의사항⚠
나는 jsp 파일에서 작업중이기 때문에 수정한 코드에서 nowStr 선언 시, template literal내에 표현식 삽입은 EL표현식 escape 처리를 위해 dollar sign($) 앞에 '\'를 추가해줘야한다.
ex) `\${year}`