jQuery, datepicker 특정날짜만 disable 시키기
작성일 15-05-06 18:38
페이지 정보
작성자서방님 조회 215회 댓글 0건본문
날짜 입력폼과 관계된 데이터 컨트롤시 jquery-ui 에서 제공하는 datepicker를 많이 이용하는데요.
오늘은 시작일과 종료일의 범위를 두고 그사이의 특정날짜들을 일부 제거해야하는 형태의 프로그램작업이 있어 작업한걸 공개해봅니다.
일단 먼저 아래와 같이 기본적으로 필요한 jquery와 jquery-ui를 불러옵니다. jquery.com CDN 을 이용했습니다.
1 | <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"rel="stylesheet"> |
2 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> |
3 | <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> |
날짜컨트롤들을 지역화하여 한글형태로 다루기 위해 먼저 datepicker 의 기본옵션값을 세팅해둔후 주말(토,일요일), 일요일, 이전날짜, 특정날짜들을 return 하는 함수들도 선언해 둡니다.
disabledDays 라는 배열변수에는 임의로 "2013-7-9", "2013-7-24", "2013-7-26" 와 같이 3개의 날짜를 듬성듬성 심어놓았습니다.
각 입력폼에 datepicker 를 호출하면서 beforeShowDay 라는 옵션값에 가져오는 값에 따라 특정날짜들이 disable 됩니다.
01 | jQuery(function($){ |
02 | $.datepicker.regional['ko'] = {closeText: '닫기',prevText: '이전달',nextText: '다음달',currentText: '오늘',monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)','7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],dayNames: ['일','월','화','수','목','금','토'],dayNamesShort: ['일','월','화','수','목','금','토'],dayNamesMin: ['일','월','화','수','목','금','토'],weekHeader: 'Wk',dateFormat: 'yy-mm-dd',firstDay: 0,isRTL: false,showMonthAfterYear: true,yearSuffix: ''}; |
03 | $.datepicker.setDefaults($.datepicker.regional['ko']); |
04 | $('#date1').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear:true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate:'+1y',beforeShowDay: disableAllTheseDays }); |
05 | $('#date2').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear:true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate:'+1y',beforeShowDay: noBefore }); |
06 | $('#date3').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear:true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate:'+1y',beforeShowDay: noWeekendsOrHolidays }); |
07 | $('#date4').datepicker({showOn: 'both',buttonText: "달력",changeMonth: true,changeYear:true,showButtonPanel:true,yearRange: 'c-99:c+99',constrainInput: true,maxDate:'+1y',beforeShowDay: noSundays }); |
08 | }); |
09 |
10 | // 특정날짜들 배열 |
11 | var disabledDays = ["2013-7-9","2013-7-24","2013-7-26"]; |
12 |
13 | // 주말(토, 일요일) 선택 막기 |
14 | function noWeekendsOrHolidays(date) { |
15 | var noWeekend = jQuery.datepicker.noWeekends(date); |
16 | return noWeekend[0] ? [true] : noWeekend; |
17 | } |
18 |
19 | // 일요일만 선택 막기 |
20 | function noSundays(date) { |
21 | return [date.getDay() != 0, '']; |
22 | } |
23 |
24 | // 이전 날짜들은 선택막기 |
25 | function noBefore(date){ |
26 | if (date < new Date()) |
27 | return [false]; |
28 | return [true]; |
29 | } |
30 |
31 | // 특정일 선택막기 |
32 | function disableAllTheseDays(date) { |
33 | var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); |
34 | for (i = 0; i < disabledDays.length; i++) { |
35 | if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) { |
36 | return [false]; |
37 | } |
38 | } |
39 | return [true]; |
40 | } |
위 소스상의 내용은 아래 입력폼에서 테스트 해볼수 있습니다.
특정일 비활성화 : 달력
이전날짜 비활성화 : 달력
주말(토,일) 비활성화 : 달력
일요일만 비활성화 : 달력
특정날짜와 주말을 비활성화한다던지 토요일만 비활성화 한다던지.. 국경일,명절 날짜데이터를 수집해서 비활성화 한다던지 여러가지로 응용해서 만들어 볼수도 있겠습니다~~~ ^^
참고 url :
댓글목록
등록된 댓글이 없습니다.