Question

我正在为datepicker使用这个插件。 https://uxsolutions.github.io/bootstrap-datepicker/

我想要实现的目标如下： - 用户打开包含datepicker的页面 - 用户点击文本输入的文本字段/图标＆gt;＆gt; datepicker打开 - 用户再次点击文本字段＆gt;＆gt; datepicker关闭。

这个插件确实有一个＆＃34; autoclose＆＃34;功能，但这不是我想要的。当用户点击日期选择器弹出窗口和文本字段之外的某处时，al也会关闭。

如何在重新点击输入时将其关闭？

Answer 1

使用onChange事件隐藏整个datepicker元素。

即：

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

Answer 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();
    }
})

单击输入时，Datepicker关闭

2 个答案: