버튼을 클릭 할 때 jquery datepicker 숨기기

Question

jquery datepicker가 있는데 문제는 버튼/텍스트 필드를 클릭 할 때 datepicker를 열고 닫을 수있게하려면 싶지만 지금은해야합니다. 날짜를 선택하거나 캘린더 바깥 쪽 (화면 어딘가)을 클릭하여 날짜 표시 줄을 닫습니다. 나는 그것을 열고 닫으려면 동일한 버튼을 다시 누르거나 (토글)함으로써 그것을 열고 닫고 싶다. 참고로

-이 여기에 작동하는지 내가 거기에 알고는 숨기기 날짜 선택기에 대한 방법하지만 확실하지의

다음

는 Fiddle 링크 및

$('#date1').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: "m/d/yy" 
 
});

#ui-datepicker-div { font-size: 12px; }

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

Answer 1

에 한번 아래의 일부 코드이다 :

$('#date1').click(function(e) { 
 
    if ($(this).data('count')) { // toggle 
 
    if ($('#ui-datepicker-div').is(':visible')){ 
 
     $('#date1').datepicker('hide'); 
 
    } else { 
 
      $('#date1').datepicker('show'); 
 
    } 
 
    } else { // first click 
 
    $(this).data('count', 1); 
 
    } 
 
}); 
 
$('#date1').blur(function() { 
 
    $(this).data('count', '') 
 
}); 
 

 
$('#date1').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: "m/d/yy" 
 
});

#ui-datepicker-div { 
 
    font-size: 12px; 
 
    position: relative !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>