jQuery UI - datepicker 특정 요일 선택하지 못하게 하기 / 데이트피커로 주말 선택 막기

안녕하세요.

고코더 입니다. 

 

 

datepicker에서 특정 요일의 선택을 막는 방법을 알아보도록 하겠습니다. 해당 방식은 데이터 피커에서 제공하는 beforeShowDay기능을 통해 제어가 가능합니다.

 

 

● 1. 간단한 예시로 설명을 드리겠습니다. . beforeShowDay를 실행하고 date.getDay()를 가져옵니다. 해당 값은 0:일요일~6:토요일까지 숫자를 반환하고 이에 대해 return 처리를 하면 쉽게 구현이 가능합니다. 비활성하고 싶은 요일의 코드만 남기고 아래 소스를 사용하시면 적용이 빠르실 거 같습니다. 

$("#calendar").datepicker({
beforeShowDay: function(date){

      /* 일요일만 선택 불가 */
      return [(date.getDay() != 0)];

      /* 월요일만 선택 불가 */
      return [(date.getDay() != 1)];

      /* 화요일만 선택 불가 */
      return [(date.getDay() != 2)];

      /* 수요일만 선택 불가 */
      return [(date.getDay() != 3)];

      /* 목요일만 선택 불가 */
      return [(date.getDay() != 4)];
      
      /* 금요일만 선택 불가 */
      return [(date.getDay() != 5)];
      
      /* 토요일만 선택 불가 */
      return [(date.getDay() != 6)];      
      
      /* 주말(토,일) 선택 불가 */
	  return [(day != 0 && day != 6)];      
      
	}
})

 

● 2. 만약 일요일 선택만 막는다면 해당 용일만 이렇게 비활성화처리가 완료됩니다.