如何聚焦引导日期时间选取器

Question

我正在使用我的代码中的Bootstrap datetime picker （bootstrap-datetimepicker.min.js）。

在 DIV 标签下使用 class="模态淡入淡出"，这将打开第一个弹出窗口，现在在第一个弹出窗口中有一个日期时间选择器，单击选择器时，它会显示第二个时间弹出窗口，但它隐藏/未聚焦。我想将焦点从第一个弹出窗口移动到第二个弹出窗口。我怎样才能做到这一点？

提前谢谢。

Answer 1

引导

datetimepicker控件有一个 span 标记，该标记在单击时显示日历。若要将焦点设置为控件，只需模拟此 span 标记的触发器事件。下面是一个完整的示例：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" />
<script src="https://cdn.jsdelivr.net/momentjs/2.13.0/moment.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
        $("#btnSetFocus").focus(function () {
            $('.input-group-addon').trigger("click");
        });
    });
</script>
<input type="button" value="Set Focus" id="btnSetFocus" />
<div class="form-group">
    <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

Answer 2

您可以使用焦点元素函数将焦点设置为任何元素。尝试以下代码一次：

function safeFocus() {
              $timeout(function () {
                  element[0].focus();
              }, 0);
             }