[英]date-time picker bootstrap Tempus Dominus
我似乎無法讓日期時間選擇器工作。 當我點擊它沒有做任何事情。
我已經從git頁面將CDN值導入頭部和JS。 但是,當我點擊該字段時,它沒有做任何事情。 我在bootstrap方面不是很有經驗,尤其是導入庫。
'html head'
<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 picker'
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.