datepicker 옵션, 특정일 비활성화, 활성화

http://nampoong.tistory.com/75

날짜 입력폼과 관계된 데이터 컨트롤시 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 :

http://api.jqueryui.com/datepicker/

http://davidwalsh.name/jquery-datepicker-disable-days

1. Jquery UI DatePicker 주말 선택 안하기 :

$(function() {

$('#datepicker').datepicker({ 

dateFormat: "yy-mm-dd",

regional: "ko",

beforeShowDay: function(date){

var day = date.getDay();

return [(day != 0 && day != 6)];

}

});

});

2. 특정요일만 선택하기 :

0 : 일요일

6 : 토요일

//아래 코드는 매주 화요일과 금요일만 선택가능

$(function() {

$('#datepicker').datepicker({ 

dateFormat: "yy-mm-dd",

regional: "ko",

beforeShowDay: function(date){

var day = date.getDay();

return [(day != 0 && day != 1 && day != 3 && day != 4 && day != 6)];

}

});

});

3. 특정일만 선택하기

$(function() {

//선택가능 날짜 

var availableDates = ["2015-01-01", "2015-01-13"];

function available(date) {

var thismonth = date.getMonth()+1;

var thisday = date.getDate();

if(thismonth<10){

thismonth = "0"+thismonth;

}

if(thisday<10){

thisday = "0"+thisday;

}

    ymd = date.getFullYear() + "-" + thismonth + "-" + thisday;

    if ($.inArray(ymd, availableDates) >= 0) {

        return [true,"",""];

    } else {

        return [false,"",""];

    }

}

$('#datepicker').datepicker({ 

dateFormat: "yy-mm-dd",

regional: "ko",

beforeShowDay: available 

});

 });

http://ellordnet.tistory.com/12