"JQuery UI 날짜선택기 datepicker"의 두 판 사이의 차이

2020년 11월 2일 (월) 02:53 기준 최신판

1 개요

jQuery UI datepicker
jQuery UI 날짜 선택기, 데이트피커
jQuery UI 달력
초간단 자바스크립트 달력
jQuery UI 튜토리얼

jQuery UI를 가지고 간단하게 날짜 선택기(달력)을 구현할 수 있다.
아래 소스는 YYYY-MM-DD 형식(예: 2012-03-20)을 적용한 것 외에는 기본형이다.

2 날짜 1개

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">

3 날짜 1개 한국어로

jQuery UI datepicker 한국어 문서를 참고하십시오.

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

<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: '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,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">

4 날짜 2개 (예: 조회기간)

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

<script>
    $(function() {
        $("#datepicker1, #datepicker2").datepicker({
            dateFormat: 'yy.mm.dd'
        });
    });

</script>

<p>조회기간:
    <input type="text" id="datepicker1"> ~
    <input type="text" id="datepicker2">
</p>

5 날짜 2개, 한국어로

<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script>
  $.datepicker.setDefaults({
    dateFormat: 'yy-mm',
    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: '년'
  });

  $(function() {
    $("#datepicker1, #datepicker2").datepicker();
  });

</script>
<p>조회기간:
  <input type="text" id="datepicker1"> ~
  <input type="text" id="datepicker2">
</p>

6 같이 보기

@@ 10번째 줄: / 10번째 줄: @@
 ==날짜 1개==
-<source lang='HTML5'>
+<syntaxhighlight lang='HTML5'>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery.min.js"></script>
@@ 18번째 줄: / 18번째 줄: @@
 $(function() {
    $( "#datepicker1" ).datepicker({
+    dateFormat: 'yy-mm-dd'
-"option", "yearRange", "2002:2012"
    });
 });
@@ 25번째 줄: / 24번째 줄: @@
 생년월일: <input type="text" id="datepicker1">
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>utwson0u</jsfiddle>
 ==날짜 1개 한국어로==
 {{참고|jQuery UI datepicker 한국어}}
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
@@ 55번째 줄: / 54번째 줄: @@
 생년월일: <input type="text" id="datepicker1">
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>xy0d7a01</jsfiddle>
 ==날짜 2개 (예: 조회기간)==
-<source lang='HTML5'>
+<syntaxhighlight lang='HTML5'>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
@@ 77번째 줄: / 76번째 줄: @@
      <input type="text" id="datepicker2">
 </p>
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>jm5xjauz</jsfiddle>
 ==날짜 2개, 한국어로==
-<source lang='HTML'>
+<syntaxhighlight lang='HTML'>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
@@ 108번째 줄: / 107번째 줄: @@
    <input type="text" id="datepicker2">
 </p>
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>r7678mof</jsfiddle>