jQuery Datepicker 예제 - 날짜 선택 제어

웹프로그램을 만들다보면 날짜 선택을 편리하게 해주는 달력 플러그인을 사용할 때가 종종 있습니다. 오늘도 jQuery UI에서 제공하는 Datepicker 기능을 사용하여서 날짜를 선택할 수 있는 달력을 폼서식에 붙였습니다.

jQuery UI에서 제공하는 Datepicker를 그대로 사용하면 월, 요일 표시가 영어로 표기되는데, 한글로 변경해서 사용이 가능합니다. 그리고 날짜 선택을 제어할 수도 있습니다.

전에 특정 요일을 달력에서 표시하지 않도록 달력 프로그램 소스를 변경한 기억이 있는데, 이번에는 달력에는 날짜가 모두 표시가 되면서 조건을 만족하지 않으면 날짜 입력이 안되도록 처리를 하였습니다.

jQuery UI 사이트에서 라이브러리를 다운받아서 원하는 곳에 저장하여서 사용하시면 됩니다.

달력 기능인 Datepicker는 이 라이브러리에 포함되어 있습니다.

http://jqueryui.com/

홈페이지에서 달력 기능을 데모해볼 수 있습니다. 여러가지 예제가 있어서 다양한 형태로 사용하는 방법을 익힐 수 있습니다.

http://jqueryui.com/datepicker

아래와 같은 폼을 작성하였는데, 기존에 오프라인으로 제출하는 서류를 온라인으로 제출하기 위한 용도로 만들었습니다.

폼 하단에 보면 퇴사날짜 란이 있는데, 이 란을 선택하면 jQuery UI에서 제공하는 Datepicker가 호출되어서 날짜를 선택할 수 있습니다.

이때 조건이 붙습니다. 퇴사날짜는 현재 기준 +1D 이어야하며, 오후 3시가 넘어가면 +2D 부터 선택이 되어야 합니다.

minDate 옵션을 사용하면 선택할 수 있는 시작날짜를 제어할 수 있습니다.

오늘이 1. 19. 이고 현재 시간이 오후 11시가 넘었으니 +2D 부터 선택이 되어야합니다. 퇴사 날짜를 선택하면 21부터 선택이 가능한 것을 볼 수 있습니다.

그리고 조건이 또 하나 있는데, 토요일과 일요일은 퇴사를 할 수 없습니다.

가장 좋은 방법은 토요일, 일요일에는 이벤트가 적용되지 않도록 해서 날짜 입력을 막는 것인데, 다른 페이지에서도 같이 사용하는 프로그램이라서 이 용도로만 수정할 수는 없었습니다.

그래서 취한 방법이 토요일, 일요일 날짜를 선택하면 안내메시지를 출력하고, 창이 닫힐 때 퇴사날짜 입력란에 값을 비워주는 것입니다. 달력 창이 닫힐 때 onClose 함수가 호출됩니다. 여기에 아래와 같은 코드를 넣어줍니다.

$("#outdt").datepicker("setDate", "");

이 방법이 정석인지는 모르겠으나 기능 구현에는 문제가 없어보입니다.

더 좋은 방법이 있으면 댓글로 알려주세요.^^

아래는 Datepicker를 설정하는 자바스크립트 소스코드 입니다.

자바스크립트 날짜 함수 Date()를 사용하여 현재 날짜와 시간을 읽어와서 달력에서 선택 가능한 날짜를 제한합니다. getMonth() 에 +1을 해준 이유는 1월이 0으로 표시되기 때문입니다.

달력에서 표시되는 월과 요일을 한글로 표기될 수 있도록 값을 지정할 수 있습니다. dayNamesMin, monthNamesShort 배열 변수에 값을 넣어주면 됩니다.:-)

이런 팁은 꼭 알아두면 나중에 편리하게 사용할 수 있습니다.