JavaScript Datepicker에서 미래 날짜(오늘 이후의 날짜)를 선택할 수 없도록 비활성화하려면 maxDate 옵션을 사용하여 현재 날짜를 최대 선택 가능 날짜로 설정하면 됩니다.
아래는 이를 구현한 전체 JavaScript 코드 예제입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>날짜 선택: <input type="text" class="disableFuturedate"></p>
<script>
$(document).ready(function () {
var currentDate = new Date();
$('.disableFuturedate').datepicker({
format: 'dd/mm/yyyy',
autoclose:true,
endDate: "currentDate",
maxDate: currentDate
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
$('.disableFuturedate').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});
</script>
</body>
</html>코드 설명
위 코드의 핵심 부분을 살펴보겠습니다.
maxDate: currentDate — 현재 날짜를 기준으로 설정하여, 오늘 이후의 모든 날짜가 달력에서 회색으로 표시되며 선택이 불가능하게 됩니다.
autoclose: true — 사용자가 날짜를 선택하면 달력이 자동으로 닫히도록 설정합니다.
changeDate 이벤트 — 날짜가 변경되는 즉시 datepicker를 숨겨 사용자 경험을 개선합니다.
keyup 이벤트 처리 — 입력창에 숫자 이외의 문자가 입력되지 않도록 정규식을 통해 필터링합니다.
실행 방법
위 코드를 index.html이라는 이름으로 저장한 후, 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server 옵션을 선택하여 실행합니다.
실행 결과
프로그램을 실행하면 다음과 같은 화면이 최신 웹 브라우저에 자동으로 나타납니다.
그다음 텍스트 박스를 마우스로 클릭하면 아래 스크린샷과 같이 날짜 선택기(datepicker)가 화면에 표시됩니다.
달력을 확인해 보면 오늘 날짜 이후의 미래 날짜들은 모두 비활성화되어 있어 클릭해도 선택되지 않는 것을 확인할 수 있습니다. 이 방식은 예약 시스템, 생년월일 입력 등 과거 또는 당일 날짜만 허용해야 하는 다양한 상황에서 유용하게 활용할 수 있습니다.