为什么我的 Bootstrap 日期选择器不工作?
Why isnt my Bootstrap datepicker working?
我的代码中有一个 Bootstrap datetimepicker
组件,几周前 还 工作,但现在停止工作了。我很感激任何能帮助我重新开始工作的人。
在下面找到我的 HTML 代码:
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="js/jquery.easing.1.3.js+jquery.waypoints.min.js+jquery.stellar.min.js+owl.carousel.min.js.pagespeed.jc.AgoWNHbz_d.js"></script></script>
<script src="js/jquery.toolbar.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js+popper.min.js+bootstrap.min.js.pagespeed.jc.ln39gZSjGk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6-beta4/js/tempus-dominus.min.js"></script>
<form action="" method="post" class="datepickers">
<div class="form-group">
<div class="input-group date" id="id_0">
<input type="text" value="10/01/2019 05:32:00 PM" class="form-control" required />
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".datepickers").click(function(){
$("#id_0").datetimepicker();
alert("MammazZ!");
});
});
</script>
</div>
</div>
当我在 datepickers 输入字段中单击时,如下图所示:
MammazZ 警报被触发,随后
略有变化(省略秒数),如下图所示:
请帮我解决这个问题!
我认为问题是由于导入和导入顺序不兼容造成的。如果您想使用 bootstrap 5,事情会变得更简单
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="container">
<h2 class="py-2">Datepicker in Bootstrap 5</h2>
<form class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col-5">
<input id="date" class="form-control" type="date"/>
</div>
</form>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
我的代码中有一个 Bootstrap datetimepicker
组件,几周前 还 工作,但现在停止工作了。我很感激任何能帮助我重新开始工作的人。
在下面找到我的 HTML 代码:
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>
<script src="js/app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="js/jquery.easing.1.3.js+jquery.waypoints.min.js+jquery.stellar.min.js+owl.carousel.min.js.pagespeed.jc.AgoWNHbz_d.js"></script></script>
<script src="js/jquery.toolbar.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js+popper.min.js+bootstrap.min.js.pagespeed.jc.ln39gZSjGk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/6-beta4/js/tempus-dominus.min.js"></script>
<form action="" method="post" class="datepickers">
<div class="form-group">
<div class="input-group date" id="id_0">
<input type="text" value="10/01/2019 05:32:00 PM" class="form-control" required />
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".datepickers").click(function(){
$("#id_0").datetimepicker();
alert("MammazZ!");
});
});
</script>
</div>
</div>
当我在 datepickers 输入字段中单击时,如下图所示:
请帮我解决这个问题!
我认为问题是由于导入和导入顺序不兼容造成的。如果您想使用 bootstrap 5,事情会变得更简单
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<section class="container">
<h2 class="py-2">Datepicker in Bootstrap 5</h2>
<form class="row">
<label for="date" class="col-1 col-form-label">Date</label>
<div class="col-5">
<input id="date" class="form-control" type="date"/>
</div>
</form>
</section>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>