"JQuery UI datepicker 버튼패널 표시"의 두 판 사이의 차이

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

jQuery UI 날짜선택기 버튼패널

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',
      showButtonPanel: true,
    });
  });
</script>

생년월일:
<input type="text" id="datepicker1">

2 Clear 버튼[ | ]

<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',
      showButtonPanel: true,
      closeText: 'Clear',
      onClose: function(dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
          document.getElementById(this.id).value = '';
        }
      }
    });
  });
</script>

생년월일:
<input type="text" id="datepicker1">

3 같이 보기[ | ]

jQuery UI 날짜선택기

@@ 2번째 줄: / 2번째 줄: @@
 ==기본==
-<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번째 줄: @@
 생년월일:
 <input type="text" id="datepicker1">
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>6hvz46py</jsfiddle>
 ==Clear 버튼==
-<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>
@@ 44번째 줄: / 44번째 줄: @@
 생년월일:
 <input type="text" id="datepicker1">
-</source>
+</syntaxhighlight>
 <jsfiddle height='350'>Lt7b415f</jsfiddle>