공부/Jquery

jquery datepicker 달력

성난호랑이 시니철 ㅣ 2015. 12. 30. 15:57

datepicker_Test.zip


jquery datepicker  달력 입니다.



?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.js"></script>
    <link rel="stylesheet"type="text/css"  href="./js/jquery-ui.css">
<script>
    $(function() {
      $( "#datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd',        // 원하는 방식으로 변경 가능  yy/mm/dd  yy.mm.dd
        prevText: '이전 달',
        nextText: '다음 달',
        monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        dayNames: ['일','월','화','수','목','금','토'],
        dayNamesShort: ['일','월','화','수','목','금','토'],
        dayNamesMin: ['일','월','화','수','목','금','토'],
        showMonthAfterYear: true,
        yearSuffix: '년'
      });
    });
</script>
<style>    // css는 datepicker   크기 조절입니다.
    .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; }
</style>
</head>
     
    <p>Date: <input type="text" id="datepicker"></p>
 
</html



참조 https://jqueryui.com/datepicker/



이렇게 사용 하시면 영어 작동하게 됩니다.


?
1
2
3
4
5
<script>
   $(function() {
     $( "#datepicker" ).datepicker();
    });
</script>


저작자표시

'공부 > Jquery' 카테고리의 다른 글

API 간단한 정리  (0) 2016.10.21
jquery :contains() 텍스트 검색  (1) 2016.10.21
.focus(); 포거스 주기  (0) 2016.01.12
jquery validate  (0) 2015.12.29
공부/Jquery 다른글

티스토리툴바