jquery datepicker 플러그인 많이 사용하시죠?? 웹/앱 개발시에 사용하기 아주 깔끔한 플러그인인데요. 예약 프로그램 같은 일정을 제어해야할 때, 등록 불가능한 날짜를 제어하는 방법에 대해 정리해보려 합니다.
일반적으로 대부분의 datepicker 라이브러리는 선택 불가능한 날짜를 처리할 수 있는 옵션을 제공합니다. 이를 사용하여 선택 불가능한 날짜를 표시하거나 선택을 방지할 수 있습니다.
아래는 일반적인 datepicker 라이브러리인 jQuery UI를 사용하여 선택 불가능한 날짜를 처리하는 예제입니다.
선택 불가능한 날짜 입력받아 처리하기
<HTML>
<label for="datepicker">Choose a date:</label>
<input type="text" id="datepicker">
<Javascript>
// 선택 불가능한 날짜 배열
var disabledDates = ["2023-02-14", "2023-02-15", "2023-02-16"];
// datepicker 초기화
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
if (disabledDates.indexOf(dateString) != -1) {
return [false];
} else {
return [true];
}
}
});
});
위의 코드에서 disabledDates 배열은 선택 불가능한 날짜의 목록을 나타냅니다.
beforeShowDay 콜백 함수를 사용하여 각 날짜를 확인하고 disabledDates 배열에 포함된 경우 return [false]을 반환하여 선택 불가능한 날짜로 처리합니다.
이 방법을 사용하여 선택 불가능한 날짜를 처리할 수 있습니다.
그럼 이제 처음에 정의할 수 있는 불가능한 날짜 말고, 동적으로 선택 불가능한 날짜를 추가해보겠습니다.
선택 불가능한 날짜 동적으로 추가하기
선택 불가능한 날짜를 동적으로 추가하려면, datepicker 라이브러리의 API를 사용하여 선택 불가능한 날짜 배열을 업데이트해야 합니다. 대부분의 datepicker 라이브러리에서는 다음과 같은 방법으로 선택 불가능한 날짜 배열을 업데이트할 수 있습니다.
jQuery UI datepicker를 사용하는 경우, 다음과 같은 코드를 사용하여 선택 불가능한 날짜를 동적으로 추가할 수 있습니다.
// 선택 불가능한 날짜 배열
var disabledDates = ["2023-02-14", "2023-02-15", "2023-02-16"];
// datepicker 초기화
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
if (disabledDates.indexOf(dateString) != -1) {
return [false];
} else {
return [true];
}
}
});
// 선택 불가능한 날짜 배열 업데이트
$("#addDisabledDateButton").click(function() {
var newDate = "2023-02-17";
disabledDates.push(newDate);
$("#datepicker").datepicker("option", "beforeShowDay", function(date) {
var dateString = $.datepicker.formatDate('yy-mm-dd', date);
if (disabledDates.indexOf(dateString) != -1) {
return [false];
} else {
return [true];
}
});
});
});
위의 코드에서 disabledDates 배열을 업데이트하기 위해 "Add Disabled Date" 버튼의 클릭 이벤트 핸들러를 정의합니다.
클릭 이벤트 핸들러에서는 disabledDates 배열에 새로운 날짜를 추가하고, datepicker의 beforeShowDay 콜백 함수를 업데이트하여 새로운 선택 불가능한 날짜가 포함된 배열을 사용하도록 합니다.
'Dev ::' 카테고리의 다른 글
| Datepicker 라이브러리 선택 불가능한 날짜 처리 (0) | 2023.10.23 |
|---|---|
| [Oracle] ORA-01461: can bind a LONG value only for insert into a LONG column - 에러 해결 방법 (0) | 2023.02.26 |
| [ORACLE] ORA-08002: sequence is not yet defined in this session / 시퀀스 에러 (0) | 2023.01.20 |
| [JAVA] List<Map> to JSONArray 변환 (0) | 2022.06.20 |
| 이클립스 콘솔 한글깨짐 해결 방법 (5) | 2022.06.18 |
댓글