> 웹 프론트엔드 > JS 튜토리얼 > jQuery UI Datepicker에서 주말과 공휴일을 제외하는 방법은 무엇입니까?

jQuery UI Datepicker에서 주말과 공휴일을 제외하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-11-17 00:28:03
원래의
321명이 탐색했습니다.

How to Exclude Weekends and Holidays from jQuery UI Datepicker?

jQuery UI Datepicker에서 토요일, 일요일, 공휴일 제외

jQuery UI Datepicker는 날짜 선택을 위한 강력한 도구를 제공합니다. 기능을 향상시키기 위해 주말이나 공휴일과 같은 특정 날짜를 비활성화할 수 있습니다. 다행히도 이는 강력한 beforeShowDay 옵션을 사용하면 가능합니다.

beforeShowDay 옵션은 날짜를 입력으로 사용하고 배열을 반환하는 함수를 허용합니다. 반환 배열에는 두 가지 값이 포함됩니다.

  1. 날짜를 선택할 수 있는지(true) 또는 선택할 수 없는지(false)를 나타내는 부울입니다.
  2. 다음에 적용할 선택적 CSS 클래스 이름입니다. 날짜 또는 기본 스타일 지정의 경우 빈 문자열입니다.

다음 항목 선택 방지 주말

토요일과 일요일이 선택되지 않도록 하려면 주말 날짜에 대해 false를 반환하는 jQuery UI에 내장된 noWeekends 함수를 활용할 수 있습니다.

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends });
로그인 후 복사

제외 공휴일

날짜 선택기에서 특정 공휴일을 제외하는 사용자 정의 기능을 정의할 수 있습니다. 예를 들어, 다음 코드는 natDays 배열에 정의된 공휴일 선택을 비활성화합니다.

function nationalDays(date) {
  for (i = 0; i < natDays.length; i++) {
    if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
      return [false, natDays[i][2] + '_day'];
    }
  }
  return [true, ''];
}
로그인 후 복사

주말 및 휴일 제외 결합

주말과 공휴일을 모두 비활성화하려면, noWeekends 및 nationalDays 기능을 결합할 수 있습니다. 다음 예에서는 주말 날짜 또는 휴일 날짜에 대해 false를 반환하는 사용자 정의 noWeekendsOrHolidays 함수를 생성합니다.

function noWeekendsOrHolidays(date) {
  var noWeekend = $.datepicker.noWeekends(date);
  if (noWeekend[0]) {
    return nationalDays(date);
  } else {
    return noWeekend;
  }
}
로그인 후 복사

이러한 사용자 정의 함수와 함께 beforeShowDay 옵션을 사용하면 토요일, 일요일 및 특정 공휴일을 효과적으로 비활성화할 수 있습니다. jQuery UI Datepicker를 사용하면 더욱 맞춤화되고 제한적인 날짜 선택 환경을 만들 수 있습니다.

위 내용은 jQuery UI Datepicker에서 주말과 공휴일을 제외하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿