JQuery UI datepicker 버튼패널 표시

jQuery UI 날짜선택기 버튼패널

1 기본

html

Copy

<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 버튼

html

Copy

<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 날짜선택기