检查 Bootstrap4 datetimepicker 的下拉菜单?
Inspect the dropdown menu of Bootstrap4 datetimepicker?
我正在尝试检查此日期时间选择器的下拉菜单中的元素。但是,每当我单击任何地方时,即使强制处于焦点状态,下拉菜单也会关闭。
我正在使用 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>
您需要将 Debug 选项设置为 true(在进入生产环境之前删除)。举个例子:
const _dtpickerOptions = {
"debug": true
}
$('#txtDtPicker').datetimepicker("options", _dtpickerOptions);
希望对您有所帮助
只需添加
debug: true
在您的代码中。
$('.multidatepicker').datetimepicker({
allowInputToggle: true,
allowMultidate: true,
sideBySide: true,
multidateSeparator: ',',
debug: true
});
我正在尝试检查此日期时间选择器的下拉菜单中的元素。但是,每当我单击任何地方时,即使强制处于焦点状态,下拉菜单也会关闭。
我正在使用 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>
您需要将 Debug 选项设置为 true(在进入生产环境之前删除)。举个例子:
const _dtpickerOptions = {
"debug": true
}
$('#txtDtPicker').datetimepicker("options", _dtpickerOptions);
希望对您有所帮助
只需添加
debug: true
在您的代码中。
$('.multidatepicker').datetimepicker({
allowInputToggle: true,
allowMultidate: true,
sideBySide: true,
multidateSeparator: ',',
debug: true
});