안녕하세요~작은나무입니다!!
오늘은 jQuery UI를 이용한 Datepicker 날짜선택 위젯에 대한 사용방법에 대해 작성해 보도록 하겠습니다.
jQuery UI의 다운로드는 https://jqueryui.com/download/ 에서 받을 수 있습니다.
의외로 자주 사용되고 있고 자주 사용하게 될 것 같아 정리해 보겠습니다. 버전은 1.12.1 버전 기준입니다.
버전을 선택하고 스크롤을 내려 다운로드 하거나 Quick downloads를 이용해서 다운로드 하셔도 됩니다.
다운로드 받으신 후 압축을 해제하면 여러개의 파일과 폴더가 보입니다. 필요한 파일과 폴더만 복사해서 사용하시면 됩니다.
jquery-ui.js / jquery-ui.css / images 폴더만 적용하실 프로젝트에 복사하신 후 아래 코드를 적용하면 사용이 가능합니다.
※ CDN주소를 이용하시는 분들도 있어서 예제는 CDN을 이용한 주소로 작성했습니다.
<html lang="ko-KR"> <head> <meta charset="UTF-8"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script> $(function() { $(".datepicker").datepicker({ prevText: "이전달" //상단 이전달 화살표 툴팁 ,nextText: "다음달" //상단 다음달 화살표 툴팁 ,dateFormat: 'yymmdd' //날짜 포맷 변경 ,showOtherMonths: true //다른 달의 날짜 표시 여부 default : false ,selectOtherMonths: true //다른 달의 선택가능 여부 default : false ,showMonthAfterYear:true //년도와 월의 표시 순서 변경 (true:년도/월 / false:월/년도) ,yearSuffix: "년" //달력의 년도 표시 텍스트 ,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월'] ,dayNamesMin: ['일','월','화','수','목','금','토'] //요일 텍스트 ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //요일 툴팁 ,maxDate: "+0D" //최대 선택일자(+0D:오늘 / -1M:한달 후, -1Y:일년 후) ,firstDay: 0, //달력의 요일 시작 설정 (0:일요일부터~ / 1:월요일부터~) ,onSelect: function(date) { //달력 선택 이벤트 console.log(date); $("#hidate").val(date); $("#year").val(date.substring(0,4)); $("#month").val(date.substring(4,6)); $("#day").val(date.substring(6,8)); }, onClose: function(selectDate) { console.log(selectDate); }, beforeShow: function (input, inst) { // 일자 선택되기전 이벤트 발생 if ($("#hidate").val().length > 0) { var year = Number($("#hidate").val().substring(0,4)); var month = Number($("#hidate").val().substring(4,6)); var day = Number($("#hidate").val().substring(6,8)); $(this).datepicker("option", "defaultDate", new Date(year, month - 1, day)); } } }); }); </script> </head> <body> <input type="text" id="year" class="datepicker"> <input type="text" id="month" class="datepicker"> <input type="text" id="day" class="datepicker"> <input type="hidden" id="hidate"> </body> </html>
저는 input에 입력 받은 yymmdd형식의 날짜를 onSelect를 이용하여 년/월/일을 별도로 분리되어 표시되도록 하였습니다.
분리 처리 후 다시 해당 년/월/일중 하나의 input을 클릭하면 달력이 오늘날짜로만 표시가 됩니다.
이 현상을 해결하기 위해 beforeShow 이벤트를 활용했습니다. (선택한 날짜의 날력을 표시하기 위해...)
별도의 hidden값을 이용하여 일자 선택되기전에 hidden값을 datepicker의 기본값으로 설정하였습니다.
입력받는 input의 cursor모양 변경
datepicker를 이용하게 되면 달력을 표시하기 위한 클릭이벤트가 발생하는대요~ 입력창은 I모양의 커서가 표시됩니다.
이 커서 모양을 손가락 모양으로 변경을 하는 방법으로 style sheet를 이용합니다.
<style> .hasDatepicker{cursor: text;} </style>
년/월/일의 분리처리를 위해 위와 같이 처리했는대요~ 더 좋은 방법이 있으신 분들은 조언 부탁 드립니다.
