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

Question

我正在使用 bootstrap-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 中查找输入元素。