Question

我正在使用bootstrap-datepicker并创建了一个将datepicker日期重置为今天的函数，一切正常，但是当我调用我的函数时，它会自动打开保留在页面上的日历框并且不会消失即使失去焦点。我怎样才能避免这个问题，或者在日期重置时不自动打开日历（我从堆栈尝试了一些解决方案，但没有任何工作......）

日期选择器配置

$('#sandbox-container .input-group.date').datepicker({
  language: "he",
  rtl: true,
  autoclose: true, 
  todayHighlight: true,
  format: "dd/mm/yyyy"
});

重置日期的功能

function resetStartDatePicker() {
  //option 1 - didn't work
  $("#sandbox-container").focusout(function () {
    $("#sandbox-container").hide;
  });

  //option 2 - didn't work
  $("#sandbox-container ~ .ui-datepicker").hide();

  //option 3 - didn't work
  $("#sandbox-container").datepicker().on('changeDate', function () {
    $(this).blur();
  });

  //option 4 - didn't work
  $.fn.datepicker.defaults.autoclose = true;
  var today = getToday();                      
  $("#sandbox-container").find("input").val(today.a);     
  $("#sandbox-container").datepicker("update", today.b);                    
}

HTML

<div id="sandbox-container" >   
  <div id="positionSorter" style="margin-top:10%">
    <a id="anotherDatelink" title="reset" class="pull-left" href="#" onclick="resetStartDatePicker()">reset</a>
  </div>

  <div class="input-group date" data-provide="datepicker" style="float:right">
    <input type="text" class="form-control  @semanticClass"  name="@Model.Name" id="@Model.Id" title="@Model.Name" value="@val">
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

Answer 1

您正在将日期选择器附加到div元素，实际上这就是问题所在。

将id设为

之类的文本框

<input id="txtDate" type="text" class="form-control  @semanticClass"  name="@Model.Name" id="@Model.Id" title="@Model.Name" value="@val">

并在javascript中定义

$('#txtDate').datepicker({
                language: "he",
                rtl: true,
                autoclose: true, 
                todayHighlight: true,
                format: "dd/mm/yyyy"
            });

或者如果你想像你提供的那样使用像

这样的改变

$('#sandbox-container input').datepicker({
                language: "he",
                rtl: true,
                autoclose: true, 
                todayHighlight: true,
                format: "dd/mm/yyyy"
            });

上面的代码从沙箱容器div中找到输入元素。

Answer 2

以下是JSFiddle，其中显示了如何设置值然后隐藏它 -

 $('#anotherDatelink').on('click', function(e) {
   $("#sandbox-container").find("input").val('01/01/2010');
   $("#sandbox-container .input-group").datepicker('hide');
 });

Answer 3

在检查了datepicker后解决了我的问题的原因是：

 $(".datepicker-days").hide();

感谢您的帮助，我喜欢您的所有答案

如何在不打开日历的情况下动态更改日期

3 个答案: