如何使我的引导程序日期选择器工作,是否有"official"引导程序 3 日期选择器?



我有一个用Bootstrap 3和jQuery构建的Web应用程序。 我想添加一个日期选择器。 我在这里查看了 Bootstrap 3 官方网站,但组件下没有日期选择器(除非我错过了它?

我用谷歌搜索并找到了这个...

https://uxsolutions.github.io/bootstrap-datepicker/?#sandbox

我尝试使用他们的代码示例将此日期选择器添加到我的应用程序中,但它不起作用......当我单击小部件时没有弹出日期选择器

<script>
$('#sandbox-container .input-group.date').datepicker({
autoclose: true,
todayHighlight: true
});
</script>
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

我想我缺少一些导入,所以我添加了这些链接/脚本行......但它仍然不起作用...

<!-- what I already had -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/juliet/resources/juliet.css">
<!-- new for the Date Picker widget -->
<link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>

问题:

我缺少哪些链接/脚本导入? 而且(除了在这里问(当你尝试添加第三方小部件时,程序员如何确定缺少哪些行?

也。。。

我注意到有几个不同的小部件被称为"引导日期选择器"......我想这是一个通用名称。

有没有一个地方可以找到"官方"Bootstrap 3 日期选择器? 或者您是否几乎必须下载不同的才能找到适合您的一个?

感谢您的任何建议,因为我真的可以使用一些建议!

使用解决方案更新:

多亏了评论者的指针@RK_oo7我弄清楚了发生了什么。

这是我完全工作的示例代码...

<!DOCTYPE html>
<title>Date Picker Test 3</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/juliet/resources/juliet.css">
<link id="bsdp-css" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
</head>

<script>
$(document).ready(function() {
$('#sandbox-container .input-group.date').datepicker({
autoclose : true,
todayHighlight : true
});
});
</script>
<body>
<div id="sandbox-container">
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</body>

请将日期选择器jquery代码放在文档就绪状态中

$( document ).ready(function() {
// your picker initialization here
});

最新更新