[jQuery/datepicker] 특정일 비활성화(disabled) 하기

datepicker 특정일 비활성화

[jQuery/datepicker] 특정일 비활성화(disabled) 하기

datepicker

datepicker는 jQuery에서 제공하는 UI Widget으로, text type의 input 태그를 클릭했을 때 달력 모양 위젯이 나타나게하거나 div 태그 내에 달력 위젯이 위치하도록 할 수 있다. datepicker를 사용하기 위해서는 jQuery 소스파일을 import 해야하며, 원하는 태그를 선택해 datepicker로 지정해주면 된다.


x
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  // datepicker를 사용하기 위해서는 jQuery의 css 및 js 파일들이 필요하다.
  // 아래와 같이 CDN을 사용해도 좋고, 파일로 저장해 연결해도 된다.
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<input type="text" id="datepicker" />
 
<script>
$("#datepicker").datepicker();
</script>
 
</body>
</html>

위와 같이 datepicker를 기본 그대로 사용해도 상관 없지만, datepicker에는 많은 option 및 method들이 있어 사용자가 원하는 방식으로 설정해 사용할 수 있다. datepicker의 option들과 method, 예제들은 여기에서 볼 수 있다. datepicker의 option이나 method는 datepicker 뒤의 소괄호 속에 작성하면 된다.

많은 옵션 중에 오늘 말하려고 하는 것은 beforeShowDay 옵션이다. beforeShowDay 옵션을 이용해서 위젯상의 특정 날짜를 선택하지 못하도록 비활성화(disabled)시킬 수 있다.

하지만 그 전에, 달력을 한글로 표시하는 방법을 알아보자.

한글 달력 표출하기

datepicker의 년, 월, 요일 표시는 기본적으로 영어로 표출된다. 하지만 한국인은 한국어를 써야하지 않겠는가? 이럴 때 사용할 수 있는 옵션은 dayNames[Min/Short], monthNames[Short], yearSuffix옵션이다.


xxxxxxxxxx
$("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    dayNames: ['일','월','화','수','목','금','토'],
    dayNamesShort: ['일','월','화','수','목','금','토'],
    dayNamesMin: ['일','월','화','수','목','금','토'],
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년'
});

특정일 비활성화 하기

beforeShowDay 옵션은 Date타입의 매개값을 받아들여 0번 째 인덱스에는 boolean값, 1번 째 인덱스에는 해당 날짜에 적용할 CSS 클래스명, 2번 째 인덱스에는 해당 날짜에 지정할 popup tooltip을 담은 배열을 반환한다.

옵션에 지정할 수 있는 function의 종류는 다양하지만, 나는 이번달의 추석휴무일과 주말을 선택하지 못하도록 지정하고싶다. (다른 함수들의 예제를 보고싶다면 이 블로그 게시글에 잘 설명되어있다.)


x
$("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    dayNames: ['일','월','화','수','목','금','토'],
    dayNamesShort: ['일','월','화','수','목','금','토'],
    dayNamesMin: ['일','월','화','수','목','금','토'],
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년',
    beforeShowDay: disableSomeDay
});
// 제외할 날짜
var disabledDays = ["2018-9-24", "2018-9-25", "2018-9-26"];
// 날짜를 나타내기 전에(beforeShowDay) 실행할 함수
function disableSomeDay(date) {
    var month = date.getMonth();
    var dates = date.getDate();
    var year = date.getFullYear();
    
    // 배열에 해당하는 날짜는 0번째 index에 false를 담아 리턴해준다.
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray(year + '-' +(month+1) + '-' + dates,disabledDays) != -1) {
            return [false];
        }
    }
    
    // 해당하지 않는 날짜는 주말이 아닌 경우에만 표시한다.
    var noWeekend = jQuery.datepicker.noWeekends(date);
    return noWeekend[0] ? [true] : noWeekend;
}

예제는 아래와 같다.

저작자표시 비영리 변경금지

'공부 > web' 카테고리의 다른 글

게시글 SNS로 공유 및 클립보드에 복사하기 (0)	2018.09.16
[node.js] route에서 반복문(forEach 문)으로 만든 배열 rendering하기 (0)	2018.09.05
쿠키와 세션 (0)	2018.07.20
Naver SMTP 서버로 임시비밀번호 보내기 (0)	2018.07.15
[HTTP] GET vs POST (0)	2018.07.14

차근차근 프로그래밍

[jQuery/datepicker] 특정일 비활성화(disabled) 하기