单击按钮时隐藏jquery datepicker

Question

我有一个 jquery 日期选择器，我遇到的问题是我希望能够在单击按钮/文本字段时切换日期选择器以打开和关闭，但现在我必须选择一天或单击外部日历（屏幕上的某处）关闭日期选择器。我想通过在同一个按钮上再次按下（切换）来打开和关闭它。

仅供参考 - 我知道 datepicker 有一个 hide 方法，但不确定这是否可以在这里使用

这里是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/>