单击输入时关闭日期选择器答案

【问题标题】：Datepicker close when clicking on input单击输入时关闭日期选择器
【发布时间】：2016-10-10 07:50:36
【问题描述】：

我正在将此插件用于日期选择器。 https://uxsolutions.github.io/bootstrap-datepicker/

我想要实现的目标如下： - 用户使用日期选择器打开页面 - 用户单击文本输入的文本字段/图标 >> datepicker 打开 - 用户再次单击文本字段 >> datepicker 关闭。

这个插件确实有一个“自动关闭”功能，但这不是我想要的。当用户单击日期选择器弹出窗口和文本字段之外的某个位置时，al 也会关闭。

当重新点击输入本身时，如何使其关闭？

【问题讨论】：

标签： jquery twitter-bootstrap datepicker

【解决方案1】：

使用onChange 事件隐藏整个日期选择器元素。

即：

$('.datepicker').datepicker().on('changeDate', function(){
  $('.datepicker').hide();
});

【讨论】：

对不起，我不是这个意思。如果我再次单击文本字段，我希望关闭日期选择器弹出窗口。首先单击输入>打开弹出窗口。第二次点击输入>关闭弹出窗口（不更改日期）

【解决方案2】：

首先创建一个变量来存储选择器是否显示：

var visible = false;

然后根据选择器的状态（如果显示与否）更改此变量

$('#datePickerID').datepicker().on('show', function(){
    visible = true;
});

$('#datePickerID').datepicker().on('hide', function(){
    visible = false;
});

然后你可以在用户点击输入框时隐藏它（如果它是可见的）。

$("#datePickerID").click(function(){ 
    if(visible)
    {
      $('#datePickerID').datepicker().hide();
    }
})

【讨论】：