jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분
jQuery("#sdt,#edt").datepicker({
showMonthAfterYear:true,
showOn:"button",
buttonImage:"/common/tbl_st_ca.jpg",
buttonImageOnly:true,
dateFormat:'yy-mm-dd',
nextText:'다음 달',
prevText:'이전 달',
dayNamesMin:['일','월','화','수','목','금','토'],
monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
});
사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. document site 에서 꼭 확인하세요.
<!-- jquery-ui resource embed start -->
<link href="resources/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script src="resources/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>
<!-- jquery-ui resource embed end -->
$(function() {
$("#startDate").datepicker( // inputbox 의 id 가 startDate 이겠죠.
{dateFormat:'yy/mm/dd' // 만약 2011년 4월 29일 선택하면 inputbox 에 '2011/04/29' 로표시
, showOn: 'button' // 우측에 달력 icon 을 보인다.
, buttonImage: '/images/Icon_calendar.gif' // 우측 달력 icon 의 이미지 패스
, buttonImageOnly: true // inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)
, changeMonth: true // 월선택 select box 표시 (기본은 false)
,changeYear: true // 년선택 selectbox 표시 (기본은 false)
,showButtonPanel: true // 하단 today, done 버튼기능 추가 표시 (기본은 false)
});
$("#endDate").datepicker({dateFormat:'yy/mm/dd',showOn: 'button'
, buttonImage: '/images/Icon_calendar.gif', buttonImageOnly: true
, changeMonth: true,changeYear: true,showButtonPanel: true});
});
$('img.ui-datepicker-trigger').attr('align', 'absmiddle'); // css 문제가 있는경우 일부 위치 조절 :)
'프로그래밍 > Script' 카테고리의 다른 글
| 최근 인기를 얻고 있는 JavaScript 라이브러리 정리 (0) | 2014.05.08 |
|---|---|
| [javascript] PourOver: Fast filtering and sorting of large collections (0) | 2014.04.29 |
| [jQuery] Twproject Gantt: JavaScript component for creating Gantts (0) | 2014.04.21 |
| [jQuery] jQuery UI Touch Punch (0) | 2014.04.17 |
| [javascript] Trianglify: Generate colorful triangle meshes (0) | 2014.04.17 |
