데이터피커 datepicker 사용 그리고 옵션

이번 작업에서는 datepicker를 사용해보았다. 새삼 내 실력이 많이 늘었구나를 느끼게 된 작업이었다.

올해 초까지만도 플러그인을 달지도 모르고, 달아도 옵션을 어떻게 수정해야 할 지 몰랐었다. 

그래서 올해 초에 했던 작업물에 데이터 피커가 들어가야하면, 

그냥 달력 아이콘 버튼만 집어 넣어놓고 개발자에게 넘겼었는데.... 

이번엔 왠걸... 데이터 피커가 이렇게 달기 쉬운거였단..... 과거의 나 한심스러운것 ㅠㅠㅠㅠ 

하지만 그땐 3개월차....

지금은 10개월차!!!!!!!!!!!!!!!!!!! 헤헿 곧 1년 찍는당

<link rel="stylesheet" type="text/css" href="/jquery-ui.css"> <script type="text/javascript" src="/jquery-1.11.3.min.js"> <script type="text/javascript" src="/jquery-ui.min.js">

스타일시트 링크로 jquery-ui와 jquery 플러그인과 jquery-ui 플러그인을 달아주고 나서 시작한다.

다른 분이 하신 작업물을 봤는데 plugin.css를 만들어서 각종 플러그인들의 css를 한페이지에 묶어 놓으셨는데, 

그 방법도 나쁘지 않은 것 같다. 우선 링크가 줄줄이 길게 늘어나지 않으니 head부분이 깔끔해서 마음에 든다.

어차피 플러그인 원본은 보관중이니까, 다음에는 이 방법대로 플러그인 css를 정리해야겠다.

<input type="text" id="datepicker"> <script> $(function(){ $('#datepicker').datepicker({ //사용할 옵션 }); }); </script>

스크립트에서 id를 빼와서 옵션을 주면된다. 

기본상태가 영문으로 나오기때문에 꽤 많은 옵션을 넣어서 한글로 보이도록 만들었다.

<script type="text/javascript"> $(function(){ $("#date-mailing").datepicker({ dateFormat: "yy-mm-dd", showOn: "button", //버튼을 보일 것인가 말것인가 buttonImage: "/images/btn/btn.png", //버튼 경로 buttonImageOnly: true, buttonText: "날짜를 선택해주세요", nextText: "다음달", prevText: "이전달", dayNames: ['월요일', '화요일', '수요일','목요일', '금요일', '토요일', '일요일'], dayNamesMin: ['월', '화', '수', '목', '금', '토','일'], monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], minDate: 0, //현재 날짜 기준으로 설정할 수 있는 과거의 기간 maxDate:10 //현재 날짜 기준으로 설정할 수 있는 미래의 기간 }); }); </script> 이번 작업에서 사용한 데이터피커 옵션이다!!!