[JQuery] datepicker 달력 날짜선택기 사용법 및 옵션

■ JQuery datepicker 달력 날짜선택기 사용법 및 옵션

---

■ 라이브러리

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

* 직접 다운로드 시 jqueryui.com 접속하여 다운로드 후 디렉토리 경로로 지정해주면 됨

---

■ 사용법

1. input 객체 datepicker 선언

<input type="text" id="datepicker">

 

2. script 선언 및 옵션 설정

• script 선언만 할 경우 (옵션 설정 X)

<script type="text/javascript">
  $(document).ready(function() {
  	$("#datepicker").datepicker();
  });
</script>

 

• script 선언 및 옵션 설정

<script type="text/javascript">
  $(document).ready(function() {
    $('#datepicker').datepicker({
      format: "yyyy-mm-dd"
      , endDate: '0d'	// 금일 이후 날짜 선택되지 않게 설정
      , autoclose: true
      , language : "kr"
      , todayBtn: "linked"
      , orientation: "bottom"
      , todayHighlight: true
      , toggleActive : true
    }).on('changeDate' , function(e){
    	// 날짜변경시 실행됨
    });
  });
</script>