[javascript] 날짜 선택 필드의 날짜 선택 범위를 제한하기
HTML의 날자 입력 필드는 별도의 날짜 라이브러리 없이도 날짜 선택을 편리하게 할 수 있게 해주는 새로운 HTML의 입력 타입입니다.
날짜 입력 필드로 날짜를 선택할 때는 두 가지 속성을 이용해서 선택할 수 있는 날짜 범위를 제한할 수 있습니다.
- min: 선택할 수 있는 최소 날짜. 최소 날짜 이전 날짜는 선택할 수 없음
- max: 선택할 수 있는 최대 날짜. 최대 날짜 이후 날짜는 선택할 수 없음
HTML 태그로는 다음처럼 작성하면 됩니다. 2024-01-01 ~ 2024-02-15 날짜 범위 안의 날짜만 캘린더에서 선택 가능하며, 그 이외의 날짜는 회색으로 표시되고 선택이 불가능합니다.
<input type="date" id="dateselect" min="2024-01-01", max="2024-02-15">
백엔드에서 HTML을 생성할 때 min, max 속성을 설정하는 방법도 있지만, UI의 조건 설정에 따라 선택할 수 있는 날짜 범위를 동적으로 설정하려면 javascript로 min, max 속성 값을 설정해야 합니다.
min, max 속성에 설정하는 날짜 포맷은 YYYY-MM-DD 10자리입니다.
자바스크립트에서는 날짜 객체의 toISOString() 함수를 사용해서 원하는 포맷의 문자열을 얻을 수 있습니다.
let today = new Date();
console.log(today.toISOString().substring(0,10))로케일 보정
다만 toISOString() 함수는 ISO8601 기준의 24자리(또는 27) 날짜/시간을 반환하고 UTC 표준시간을 표시합니다. 서울과는 9시간 느린 시간이기 때문에 시간을 보정해야 합니다.
Date 객체는 밀리세컨트 단위 표시이므로 다음처럼 계산식을 사용해서 서울 타임존의 시간을 얻을 수 있습니다.
let offset = 1000 * 60 * 60 * 9 // 9시간 밀리세컨트 값
let today = new Date(Date.now() + offset)지역에 상관없이 정확한 시간을 얻고 싶으면 날짜 객체의 getTimezoneOffset() 함수로 지역의 분단위 오프셋 값을 얻을 수 있습니다. getTimezoneOffset() 함수는 음수를 반환합니다. 따라서 +9 시간을 하려면 현재 시간에서 빼기를 해야 합니다.
let offset = new Date().getTimezoneOffset() * 60000; // 9시간 밀리세컨드 값
let today = new Date(Date.now() - offset);속성 값 적용
속성에 적용할 수 있는 문자열 포맷을 만들 수 있으므로 속성에 날짜를 설정합니다.
예약일을 선택할 때는 오늘 날짜 이전 날짜는 선택할 수 없도록 막아야 합니다. min 속성에만 오늘 날짜를 지정하면 오늘날짜 이후의 날짜만 선택할 수 있게 됩니다.
document.getElementById('dateselect').min = today.toISOString().substring(0,10);또는 setAttribute() 함수로 속성 값을 설정해도 동일합니다.
document.getElementById('dateselect').setAttribute("min", today);날짜 범위 제한
오늘 날짜부터 3개월 날짜 범위의 날짜만 선택할 수 있게 하려면 min, max 속성을 모두 설정해야 합니다.
//min
document.getElementById('dateselect').min = today.toISOString().substring(0,10)
//max 날짜는 3개월 오늘 날짜 전일
today.setMonth(today.getMonth()+3)
today.setDate(today.getDate()-1)
document.getElementById('dateselect').max = today.toISOString().substring(0,10)월 단위로 말일까지 선택 가능한 날짜 범위를 제한하려면 setDate() 함수로 -1을 입력하면 전월 말일을 선택할 수 있습니다.
전월 말일이 몇일인지 정확하게 알 수 없을 때 이 방법으로 전월 말일을 선택할 수 있습니다.
today.setDate(-1)
document.getElementById('dateselect').max = today.toISOString().substring(0,10)
aPOST
aPOST