[jQuery] DatePicker

1. jQuery datepicker

<script src='http://code.jquery.com/jquery-1.9.1.js' type='text/javascript'></script>

<script src='http://code.jquery.com/ui/1.10.4/jquery-ui.js' type='text/javascript'></script>

<link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>

<style> 달력 스타일 변경 (달력아이콘 가운데 정렬 및 달력 사이즈 변경)

.ui-datepicker{ font-size: 12px; width: 160px; }

.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }

.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }

img.ui-datepicker-trigger{ margin-left:2px; vertical-align:middle; cursor: Pointer;

</style>

script 시작

$(function(){ //jquery 달력 노출

$("#date").datepicker({

monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],

dayNamesMin:["일","월","화","수","목","금","토"],

changeMonth: true,    //달력 셀렉트 박스 유무

changeYear: true,    //년 셀렉트 박스 유무

buttonImageOnly : true,

showOn: 'both', //버튼노출

buttonImage : "../images/button/butt_calender.gif",

dateFormat: "yy-mm-dd", //날짜 출력 형식

});

});

script 끝

html

<input type="text" id="date" />

아래와 같이 표현된다~