javascript - 日期时间选择器引导 Tempus Dominus
问题描述
我似乎无法让日期时间选择器工作。当我点击它不做任何事情。
我已经从 git 页面将 CDN 值导入到 head 和 JS 中。但是,当我单击该字段时,它什么也不做。我在引导方面不是很有经验,尤其是导入库。
'html头'
<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>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
'html body-dateTime 选择器'
<div class="form-group">
<label for="dates">State the time Interval where the tour can BEGIN</label>
<div class="input-group date" id="datetimepicker7" data-target-input="nearest">
<input type="datetime" class="form-control datetimepicker-input" data-target="#datetimepicker7"
placeholder="Early-Start" name="early" required />
<span class="error"></span>
<div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
'JS'
<script type="text/javascript">
$(function () {
$('#datetimepicker7').datetimepicker();
$('#datetimepicker8').datetimepicker({
useCurrent: false
});
$("#datetimepicker7").on("change.datetimepicker", function (e) {
$('#datetimepicker8').datetimepicker('minDate', e.date);
});
$("#datetimepicker8").on("change.datetimepicker", function (e) {
$('#datetimepicker7').datetimepicker('maxDate', e.date);
});
});
</script>
当我单击该字段时,它什么也没做。它应该显示一个“弹出”日历。我需要导入其他东西吗?
解决方案
这个插件似乎没有关于所有要求和特定版本的非常清晰的文档。我从网站上做出的假设:https ://tempusdominus.github.io/bootstrap-4/
$(function() {
$('#datetimepicker7').datetimepicker();
$('#datetimepicker7').on("change.datetimepicker", function(e) {
$('#datetimepicker8').datetimepicker('minDate', e.date);
});
$('#datetimepicker8').datetimepicker({
useCurrent: false
});
$('#datetimepicker8').on("change.datetimepicker", function(e) {
$('#datetimepicker7').datetimepicker('maxDate', e.date);
});
});
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
}
<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/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-XPTBwC3SBoWHSmKasAk01c08M6sIA5gF5+sRxqak2Qs=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone-with-data-2012-2022.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-z0oKYg6xiLq3yJGsp/LsY9XykbweQlHl42jHv2XTBz4=" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content">
<div class="container">
<div class='col-md-5'>
<div class="row">
<div class="form-group">
<div class="input-group date" id="datetimepicker7" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" />
<div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class="input-group date" id="datetimepicker8" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8" />
<div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- firebase-authentication - 在使用 Firebase 作为身份验证提供程序时配置密码重用策略和密码强度
- angular - Angular 在 ngFor 循环搜索重复项中使用管道过滤器
- sql - SQL sp_addextendedproperty 问题
- docker - 为 nexus 存储库中的 docker 图像设置自定义清理
- html - 当屏幕最小化时,如何将主要内容与响应式菜单对齐?
- python - 如何使用电子表格中的两个不同列制作按图分组的条形图?
- javascript - 在无限滑块轨道动画上使用 Element.prepend 的意外 DOM 排序行为
- r - R标记中的双标图由两个变量?
- sql - 如何检查一列中的数据在另一列中不存在
- android - 如何将 Google Barcode 添加到片段内的 android 应用程序?