[JQUERY] datepicker 특정 날짜 비활성화 disabled (beforeShowDay)

datepicker 플러그인을 사용할 때 특정 날짜를 비활성화시켜 사용자가 해당 날짜를 선택하지 못하게 하는 방법 입니다.

jquery 파일과 jquery-ui 파일을 다운로드 해야 합니다.


Jquery UI 파일은 아래 URL을 클릭해서 다운로드를 진행해 주세요.

Jquery UI 파일 다운로드 이동


아래 스크립트를 활용하여 사용하시면 되겠습니다.

datepicker의 beforeShowDay 옵션을 주고, 함수를 호출하여 날짜를 비활성화 합니다.


  1. jQuery(function($){
  2. /*
  3. //config 값을 json형식으로 만든후 setDefaults로 설정할수도 있음.
  4. $.datepicker.regional['ko'] = {closeText: '닫기',dayNamesShort: ['일','월','화','수','목','금','토']};
  5. $.datepicker.setDefaults($.datepicker.regional['ko']);
  6. */
  7. $(".calander").datepicker({
  8. changeMonth:true,
  9. changeYear:true,
  10. yearRange:"1900:2014",
  11. showOn:"both",
  12. buttonImage:"../img/ico/calendar.gif",
  13. buttonImageOnly:true,
  14. dateFormat: 'yy-mm-dd',
  15. showOtherMonths: true,
  16. selectOtherMonths: true,
  17. showMonthAfterYear: true,
  18. dayNamesMin: ['일','월', '화', '수', '목', '금', '토'],
  19. monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  20. monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
  21. nextText: '다음 달',
  22. prevText: '이전 달',
  23. beforeShowDay: disableAllTheseDays
  24. });
  25. });
  26. // 특정날짜들 배열
  27. var disabledDays = ["2013-7-9","2013-7-24","2013-7-26"];
  28. // 주말(토, 일요일) 선택 막기
  29. function noWeekendsOrHolidays(date) {
  30. var noWeekend = jQuery.datepicker.noWeekends(date);
  31. return noWeekend[0] ? [true] : noWeekend;
  32. }
  33. // 일요일만 선택 막기
  34. function noSundays(date) {
  35. return [date.getDay() != 0, ''];
  36. }
  37. // 이전 날짜들은 선택막기
  38. function noBefore(date){
  39. if (date < new Date())
  40. return [false];
  41. return [true];
  42. }
  43. // 특정일 선택막기
  44. function disableAllTheseDays(date) {
  45. var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  46. for (i = 0; i < disabledDays.length; i++) {
  47. if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
  48. return [false];
  49. }
  50. }
  51. return [true];
  52. }


* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성

관련 블로그 구경하기

작성자의 다른 포스팅