● jQuery UI Datepicker를 사용하여 Calendar 기능을 구현할 때 특정 날짜(들)만 선택 가능 또는 불가능하게 하는 방법
- beforeShowDay : 각 날짜마다 호출되면서 해당 날짜를 표시할지 여부를 결정하는데 사용
- 선택 가능 또는 불가능하게 할 날짜를 배열에 담아 차례대로 돌리면서
선택 가능하게 하려면 [false], 가능하게 하려면 [true]를 반환
* 참고
return true : true라는 boolean 값을 반환. true로 인식.
return [true] : true라는 값을 포함하는 배열을 반환. 길이가 1인 배열의 첫번째 요소로 true가 포함되어 있는 상태.
- 방법은 2가지(객체를 사용하여 초기화 하는 방법 / option 메소드를 사용하여 옵션을 업데이트 하는 방법)
● 객체를 사용하여 초기화 하는 방법
- $("#datepicker").datepicker({ ... });
- Datepicker 위젯을 초기화하고 옵션을 설정
- { ... }내에서 여러 옵션을 한 번에 설정 가능
● option 메소드를 사용하여 옵션을 업데이트 하는 방법
- $("#datepicker").datepicker("option", "beforeShowDay", function(date){ ... });
- 이미 초기화된 Datepicker 위젯의 특정 옵션(현재의 경우 특정 옵션이란 "option"을 의미함)을 업데이트
- 첫번째 파라미터에 해당하는 옵션값을 변경 가능
- 이미 초기화된 Datepicker 위젯의 옵션을 종적으로 변경해야 할 때 유용
ex) 버튼 클릭을 통해 선택 가능 날짜를 변경해야 하는 경우
1. 객체를 사용하여 초기화 하는 방법
1) 지정한 날짜를 선택불가하게 하는 방법
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
// 선택할 수 없게 할 날짜 목록
var disabledDates = ["2023-05-25", "2023-05-28", "2023-06-02"];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var formattedDate = $.datepicker.formatDate("yy-mm-dd", date);
// 만약 현재 날짜가 disabledDates 배열에 포함되어 있다면 선택 불가능하게 함
if ($.inArray(formattedDate, disabledDates) != -1) {
return [false];
}
return [true];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
2) 지정한 날짜를 선택가능하게 하는 방법
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
// 선택 가능한 날짜 목록
var selectableDates = ["2023-05-25", "2023-05-28", "2023-06-02"];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var formattedDate = $.datepicker.formatDate("yy-mm-dd", date);
// 만약 현재 날짜가 selectableDates 배열에 포함되어 있다면 선택 가능하게 함
if ($.inArray(formattedDate, selectableDates) != -1) {
return [true];
}
return [false];
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
2. option 메소드를 사용하여 옵션을 업데이틑 하는 방법
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
// Datepicker 초기화
var datePicker = $("#datepicker").datepicker();
// 버튼 A를 눌렀을 때
$("#buttonA").click(function() {
// Datepicker의 beforeShowDay 옵션 업데이트
datePicker.datepicker("option", "beforeShowDay", function(date) {
var formattedDate = $.datepicker.formatDate("yy-mm-dd", date);
// 선택 가능한 날짜 목록
var selectableDates = ["2023-08-03", "2023-08-05", "2023-08-08"];
if ($.inArray(formattedDate, selectableDates) != -1) {
// 선택 가능한 날짜에 클래스 추가
return [true];
}
// 선택 불가능한 날짜에 클래스 추가
return [false, "disabled", "선택 불가능"];
});
});
// 버튼 B를 눌렀을 때
$("#buttonB").click(function() {
// Datepicker의 beforeShowDay 옵션 업데이트
datePicker.datepicker("option", "beforeShowDay", function(date) {
var formattedDate = $.datepicker.formatDate("yy-mm-dd", date);
// 선택 가능한 날짜 목록
var selectableDates = ["2023-08-11", "2023-08-16", "2023-08-19"];
if ($.inArray(formattedDate, selectableDates) != -1) {
// 선택 가능한 날짜에 클래스 추가
return [true];
}
// 선택 불가능한 날짜에 클래스 추가
// 1 : 날짜 선택 가능 여부
// 2 : CSS 클래스
// 3 : 툴팁 텍스트
return [false, "disabled", "선택 불가능"];
});
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<button id="buttonA">Set Date A</button>
<button id="buttonB">Set Date B</button>
</body>
</html>'Programming > Javascript' 카테고리의 다른 글
| [Javascript] 전개 연산자(Spread Operator) (0) | 2023.10.28 |
|---|---|
| [Javascript] val()과 attr("value")의 차이 (0) | 2023.08.24 |
| [Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce) (0) | 2023.07.17 |
| [Javascript] 두 배열의 겹치는 값을 제외한 배열 추출하기 (0) | 2023.07.06 |
| [Javascript] context path 가져오는 방법 (0) | 2023.06.23 |
댓글