检查 Bootstrap4 datetimepicker 的下拉菜单？答案

【问题标题】：Inspect the dropdown menu of Bootstrap4 datetimepicker?检查 Bootstrap4 datetimepicker 的下拉菜单？
【发布时间】：2019-08-08 09:44:20
【问题描述】：

我正在尝试检查此日期时间选择器的下拉菜单中的元素。但是，每当我单击任何位置时，即使强制焦点状态，下拉菜单也会关闭。

我在 Mac 上使用 Chrome。

提前感谢您的帮助！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tempus Dominus</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" />
<link rel="stylesheet" href="https://tempusdominus.github.io/bootstrap-4/theme/css/tempusdominus-bootstrap-4.css" />

<style>

</style>

</head>

  <body>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>


    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <input type="text" class="form-control datetimepicker-input" id="datetimepicker5" data-toggle="datetimepicker" data-target="#datetimepicker5" />
        </div>
        <script type="text/javascript">
          $(function() {
            $('#datetimepicker5').datetimepicker();
          });
        </script>
      </div>
    </div>

  </body>
</html>

【问题讨论】：

标签： bootstrap-4 datetimepicker bootstrap-datetimepicker tempus-dominus-datetimepicker

【解决方案1】：

您需要使用设置为 true 的 Debug 选项（在进入生产环境之前删除）。举个例子：

const _dtpickerOptions = {
    "debug": true
}

$('#txtDtPicker').datetimepicker("options", _dtpickerOptions);

希望对你有帮助

【讨论】：

【解决方案2】：

只需添加

调试：真

在您的代码中。

$('.multidatepicker').datetimepicker({
    allowInputToggle: true,
    allowMultidate: true,
    sideBySide: true,
    multidateSeparator: ',',
    debug: true
});

【讨论】：