jQuery 달력(datepicker) 특정날짜 비활성화(disable) 시키기 > jquery

jQuery 달력(datepicker) 특정날짜 비활성화(disable) 시키기

작성일 16-09-06 09:26

페이지 정보

작성자서방님 조회 314회 댓글 0건

본문

많이들 사용하시는 jQuery 달력입니다.

달력사용할때 특정 날짜를 비활성화 한다던가 아니면..
특정날짜만 사용하게 하는등 그런 부분이 필요할때 사용하는 법입니다.

우선 기본적으로 jquery파일은 기본이고 ui 파일도 다운받아야 합니다.
싸이트 http://jqueryui.com/download/all/ 에 가면 받을수 있습니다.

사용법

jQuery(function($){
     
    /*
    //config 값을 json형식으로 만든후 setDefaults로 설정할수도 있음.
     
    $.datepicker.regional['ko'] = {closeText: '닫기',dayNamesShort: ['일','월','화','수','목','금','토']};
    $.datepicker.setDefaults($.datepicker.regional['ko']);
    */
     
    $(".calander").datepicker({
        changeMonth:true,
        changeYear:true,
        yearRange:"1900:2014",
        showOn:"both",
        buttonImage:"../img/ico/calendar.gif",
        buttonImageOnly:true,
        dateFormat: 'yy-mm-dd',
        showOtherMonths: true,
        selectOtherMonths: true,
        showMonthAfterYear: true,
        dayNamesMin: ['일','월', '화', '수', '목', '금', '토'],
        monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
        nextText: '다음 달',
        prevText: '이전 달',
        beforeShowDay: disableAllTheseDays 
    });
     
});
 
// 특정날짜들 배열
var disabledDays = ["2013-7-9","2013-7-24","2013-7-26"];
 
// 주말(토, 일요일) 선택 막기
function noWeekendsOrHolidays(date) {
    var noWeekend = jQuery.datepicker.noWeekends(date);
    return noWeekend[0] ? [true] : noWeekend;
}
 
// 일요일만 선택 막기
function noSundays(date) {
  return [date.getDay() != 0, ''];
}
 
// 이전 날짜들은 선택막기
function noBefore(date){
    if (date < new Date())
        return [false];
    return [true];
}
 
// 특정일 선택막기
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}


참고 사이트
https://davidwalsh.name/jquery-datepicker-disable-days

c

댓글목록

등록된 댓글이 없습니다.