본문 바로가기

프로그래밍/제이쿼리

제이쿼리 달력 datepicker

datepicker 달력 추가하기



<!-- 달력 추가 css -->

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

<!-- -->


<!-- 달력추가 js-->

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<!-- 달력 --> 




// 제이쿼리 삽입 - 옵션들은 datepicker 검색하면 잘 나옴

// datepicker 한글 월 일 수정

$( "#datepicker" ).datepicker({

dateFormat: 'yy-mm-dd',

changeMonth: true, 

changeYear: true,

minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다.

yearRange: 'c-100:c+30', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가.

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월'] 

});  


<!-- body 안에-->

<div class="inputbox">

<label for="datepicker"></label><input type="text" name="datepicker" id="datepicker" placeholder="날짜를 입력하세요" />

</div>