처음부터 차근차근
jquery datepicker 본문
반응형
jquery datepicker을 사용하는 방법에 대한 글이다.
datepicker 공식 사이트 :
https://jqueryui.com/datepicker/
Datepicker | jQuery UI
Datepicker Select a date from a popup or inline calendar The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (b
jqueryui.com
1. jquery datepicker을 사용할 때 필요한 css 파일과 js 파일을 cdn 방식으로 선언한다.
(가능한한 body tag 뒤쪽에 선언해준다... 이유는 -> 2021.12.03 - [Error&Warning] - $(...).datepicker is not a function )
<!--datepicker-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-ko.min.js"></script>
2. datepicker을 사용할 input type="text"에다가 특정 아이디나 class를 삽입한다.
<input type="text" id="datepicker" class="form-control" name="writeday" value="" />필자는 id 값에다 datepicker를 입력해줬다.
3. 자바스크립트 코드를 작성해준다.
$( function() {
$( "#datepicker" ).datepicker();
});이렇게 하면 아까 지정한 datepicker id를 가진 text에서 datepicker을 사용할 수 있다.
반응형
'프로그래밍 > Javascript' 카테고리의 다른 글
| jquery : Event.stopImmediatePropagation() (0) | 2022.02.06 |
|---|---|
| jquery click 이벤트 동적 페이지에 적용하는 법 (0) | 2022.02.05 |
| 별점 구현 (0) | 2022.02.04 |
| Full Calendar (php 사용) (1) | 2021.12.01 |
| Javascript 정리 (0) | 2021.10.22 |
'프로그래밍/Javascript' Related Articles
more
Comments