1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <script type="text/javascript"> $(document).ready(function() { $(".datepicker").datepicker({ showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다. buttonImage: "/application/db/jquery/images/calendar.gif", // 버튼 이미지 buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다. changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다. changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다. minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다. nextText: '다음 달', // next 아이콘의 툴팁. prevText: '이전 달', // prev 아이콘의 툴팁. numberOfMonths: [1,1], // 한번에 얼마나 많은 월을 표시할것인가. [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다. stepMonths: 3, // next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가. yearRange: 'c-100:c+10', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가. showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다. ( ...으로 표시되는부분이다.) currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널 closeText: '닫기', // 닫기 버튼 패널 dateFormat: "yy-mm-dd", // 텍스트 필드에 입력되는 날짜 형식. showAnim: "slide", //애니메이션을 적용한다. showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식. monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식. }); }); </script> <body> <input type="text" title="생년월일" name="birthDay" id="birthDay" class="datepicker" value=""> </body> | cs |
위와같이 했을 경우 생년월일 input 박스 클릭시 아래와 같은 달력이 생성 됩니다.
'WORK > JQUERY' 카테고리의 다른 글
| jquery select box 연도 보여주기 (0) | 2018.06.14 |
|---|---|
| ajax 에서 return false 보내기 (0) | 2018.05.16 |
| jquery 시,분 선택하기 (0) | 2018.04.12 |
| 동일한 input name 값 가져오기 (2) | 2018.04.06 |
| li 태그 클래스 바꾸기 (0) | 2018.03.01 |