HTML에서 날짜 선택기는 사용자가 웹 사이트나 양식에서 특정 날짜를 선택할 수 있도록 하는 유용한 입력 컨트롤입니다. 기본적으로 날짜 선택기는 모든 날짜를 허용하지만 max를 사용하여 선택 가능한 날짜 범위를 제한할 수 있습니다. 오늘 또는 이전 날짜로 선택을 제한하는 속성입니다.
구문
<input type="date" max="YYYY-MM-DD">
날짜 선택기란 무엇인가요?
날짜 선택기는 사용자가 달력 인터페이스를 통해 날짜를 선택할 수 있는 사용자 인터페이스 구성 요소입니다. 예약 시스템, 예약 소프트웨어, 생년월일 수집과 같은 애플리케이션의 양식에 일반적으로 사용됩니다.
JavaScript를 사용하여 최대 날짜를 오늘로 설정
max을 동적으로 설정하려면 오늘 날짜 속성을 사용하려면 현재 날짜를 YYYY-MM-DD 형식으로 생성하려면 JavaScript가 필요합니다.
HTML 구조
type="date"를 사용하여 입력 요소를 만듭니다.
<input type="date" id="datepicker">
전체 예
JavaScript를 사용하여 선택 가능한 최대 날짜를 오늘로 설정하는 방법은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Date Picker with Max Date</title>
</head>
<body>
<h3>Select a Date (Max: Today)</h3>
<input type="date" id="datepicker">
<script>
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
document.getElementById('datepicker').setAttribute('max', formattedDate);
</script>
</body>
</html>
A date picker input appears that only allows selection of dates up to and including today's date. Future dates are disabled and cannot be selected.
자바스크립트 작동 방식
JavaScript 코드는 다음 단계를 수행합니다.
- 현재 날짜를 나타내는 새로운 Date 객체를 생성합니다.
- 연도, 월, 일 구성요소 추출
padStart()를 사용하여 앞에 0을 붙여 월과 일 형식을 지정합니다.- 날짜 입력에 필요한 YYYY-MM-DD 형식으로 결합
- 날짜 선택기의 최대 속성을 설정합니다
사용 사례
최대 날짜를 오늘로 제한하는 것은
에 유용합니다.- 현재 또는 과거 날짜만 선택할 수 있는 예약 시스템
- 생일 또는 이벤트 등록 양식
- 미래 날짜가 관련되지 않은 데이터 수집 양식
- 역사적 기록 입력 시스템
결론
HTML 날짜 선택기의 최대 날짜를 오늘로 설정하면 사용자가 미래 날짜를 선택할 수 없습니다. JavaScript를 사용하여 오늘 날짜를 YYYY-MM-DD 형식으로 동적으로 생성하고 입력의 max에 적용합니다. 실시간 날짜 제한 속성입니다.
