Bootstrap datepicker: 焦点不打开

Question

我正在使用 bootstrap 日期选择器和 jQuery 验证。我已将 jquery 验证设置为在字段为空且为必填项时专注于输入。

然而，使用 bootstrap 日期选择器时，焦点事件会导致日历打开。这在我的情况下并不理想。我想知道是否有一种方法可以集中注意力，但可以通过 preventDefault 或类似的方法？

我做了一个jsfiddle。基本上，是否可以单击按钮以关注元素，但不打开日历？ https://jsfiddle.net/a2gkpxuh/ 焦点的主要目的是滚动页面，以便用户可以看到所需的元素。

$("#myButton").click(function () {
   //Some code to prevent default here?  Possibly disable datepicker before .focus event
   $("#myDatePicker").focus();
});

我想一个可能的解决方案是禁用日期选择器，然后执行 jQuery.validate()，然后重新启用日期选择器。不过我觉得还有更好的方法...

仅供参考这是一个类似的问题：Set focus on Jquery datepicker on datepicker close, without opening datepicker

Answer 1

您可以将日期选择器隐藏在焦点之后：

$("#myButton").click(function () {
    $("#myDatePicker").focus();
  $("#myDatePicker").datepicker('hide');
});

Answer 2

只需添加到 Maxwell_Orr 即可防止用户弹出日期选择器。

你可以这样做：

$('.default-date-picker').datepicker({
  format: 'mm/dd/yyyy',
  autoclose: true
});

$("#myButton").click(function () {
    $("#myDatePicker").focus();
    $("#myDatePicker").datepicker('hide');
});

$("#myDatePicker").click(function () {
    $("#myDatePicker").focus();
});

Bootstrap datepicker: 焦点不打开

Bootstrap datepicker: Focus without opening

javascript

jquery

bootstrap-datepicker

onfocus