我无法使用 tempus dominus 选择器链接日期开始和日期结束。我已经在其网站上创建了代码作为指令，但它不起作用。
这是我的 HTML 和 Jquery 在一个文件中
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment/head :: headFragment"/>
<head>
<style>
html, body, .content-page {
height: 100%;
}
#wrapper, .content-page {
min-height: 100%;
}
.content {
overflow: auto;
/*padding-bottom: 38.5667px; !* this needs to be bigger than footer height*!*/
padding: 20px 5px 124px 5px !important;
}
footer {
z-index: 1;
/*margin-top: -38.5667px;*/
position: static;
}
</style>
</head>
<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper">
<div th:replace="fragment/topbar :: topBarFragment"/>
<div th:replace="fragment/leftsidebar :: leftSideBarFragment"/>
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">
<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<h4 class="page-title">Cek MO ISAT</h4>
<br/>
</div>
</div>
<div class="card-box">
<div class="row">
<div class="col-lg-4">
<div class="form-group" id="divShortCode">
<label>Shortcode: </label>
<br/>
<select class="form-control" id="shortcode">
<option value="93230">93230</option>
<option value="99386">99386</option>
<!-- <option value="99386 partner">99386 Partner</option>-->
<option value="Ximpay">XIMPAY</option>
</select>
</div>
</div>
<div class="col-lg-4" id="divinputMsisdn">
<div class="form-group" id="groupinputMsisdn"><label>MSISDN<span
class="text-danger">*</span></label><br/><input class="form-control"
id="inputMsisdn" required="true"
placeholder="Format No HP : 6281259xxxxx"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Start Date</label><br/>
<div class="input-group date" id="divDateStart" data-target-input="nearest" >
<input type="text" class="form-control datetimepicker-input" data-target="#divDateStart" />
<div class="input-group-append" data-target="#divDateStart" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>End Date</label><br/>
<div class="input-group date" id="divDateEnd" data-target-input="nearest" >
<input type="text" class="form-control datetimepicker-input" data-target="#divDateEnd" />
<div class="input-group-append" data-target="#divDateEnd" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="viewButton" disabled="">View</button>
</div>
<!--Table-->
<div class="card-box" hidden="hidden" id="listhasil">
<div class="row">
<div class="col-12">
<div class="card-box table-responsive">
<h4 class="m-t-0 header-title">List MO</h4>
<p class="text-muted font-14 m-b-30"></p>
<table id="datatable-buttons" class="table table-striped table-bordered" cellspacing="0"
width="100%"></table>
</div>
</div>
</div>
<!-- end row -->
</div>
</div>
<!-- container -->
</div>
<!-- content -->
<!--Loading-->
<div class="modal1Class modal-backdrop fade show object-hide"></div>
<div class="modal2Class modal fade show object-hide" data-backdrop="static" data-keyboard="false" tabindex="-1"
role="dialog"
style="padding-top: 15%; overflow-y: visible; padding-right: 17px; display: block;">
<div class="modal-dialog modal-m">
<div class="modal-content">
<div class="modal-header"><h4 class="modal-title" style="margin:0;">Loading</h4></div>
<div class="modal-body">
<div class="progress progress-striped active" style="margin-bottom:0;">
<div class="progress-bar" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>
<!--End Loading-->
<footer th:replace="fragment/footer :: footerFragment"/>
</div>
</div>
<!-- END wrapper -->
<block th:replace="fragment/javascript :: javaScriptFragment"/>
<script th:src="@{/resources/assets/js/dialog.js}"></script>
<script th:src="@{/resources/assets/js/ellipsis.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// jQuery.datetimepicker.setLocale('en');
// function changeFunc() {
// var tgl_awal = $("#tglawal").val();
// var dateawal = new Date(tgl_awal);
// var date2 = new Date();
// date2.setHours(0, 0, 0, 0);
// if (dateawal.getTime() === date2.getTime()) {
// document.getElementById("divtglakhir").setAttribute("hidden", "hidden");
// }
// else {
// document.getElementById("divtglakhir").removeAttribute("hidden");
// }
// }
//
// var date = new Date();
// date.setDate(date.getDate() - 4);
$(function () {
$("#divDateStart").datetimepicker();
$("#divDateEnd").datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#divDateStart").on("change.datetimepicker", function (e) {
$("#divDateEnd").datetimepicker('minDate', e.date);
});
$("#divDateEnd").on("change.datetimepicker", function (e) {
$("#divDateStart").datetimepicker('maxDate', e.date);
});
});
/*]]>*/
</script>
</body>
</html>
这是插入插件的 Javascript 片段
<html xmlns:th="http://www.thymeleaf.org">
<block th:fragment="javaScriptFragment">
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script th:src="@{/resources/assets/js/jquery.min.js}"></script>
<script th:src="@{/resources/assets/js/popper.min.js}"></script>
<script th:src="@{/resources/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/resources/assets/js/detect.js}"></script>
<script th:src="@{/resources/assets/js/fastclick.js}"></script>
<script th:src="@{/resources/assets/js/jquery.slimscroll.js}"></script>
<script th:src="@{/resources/assets/js/jquery.blockUI.js}"></script>
<script th:src="@{/resources/assets/js/waves.js}"></script>
<script th:src="@{/resources/assets/js/wow.min.js}"></script>
<script th:src="@{/resources/assets/js/jquery.nicescroll.js}"></script>
<script th:src="@{/resources/assets/js/jquery.scrollTo.min.js}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/resources/bower_components/metisMenu/dist/metisMenu.min.js}"></script>
<!--WaitingDialog-->
<script th:src="@{/resources/assets/js/bootstrap-waitingfor.js}"></script>
<!-- Plugin -->
<script th:src="@{/resources/plugins/moment/moment.js}"></script>
<script th:src="@{/resources/plugins/timepicker/bootstrap-timepicker.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/resources/plugins/clockpicker/js/bootstrap-clockpicker.min.js}"></script>
<script th:src="@{/resources/plugins/bootstrap-daterangepicker/daterangepicker.js}"></script>
<script th:src="@{/resources/plugins/waypoints/lib/jquery.waypoints.min.js}"></script>
<script th:src="@{/resources/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/resources/plugins/counterup/jquery.counterup.min.js}"></script>
<script th:src="@{/resources/plugins/morris/morris.min.js}"></script>
<script th:src="@{/resources/plugins/raphael/raphael-min.js}"></script>
<script th:src="@{/resources/plugins/jquery-knob/jquery.knob.js}"></script>
<!-- Required datatable js -->
<script th:src="@{/resources/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/dataTables.bootstrap4.min.js}"></script>
<!-- Buttons examples -->
<script th:src="@{/resources/plugins/datatables/dataTables.buttons.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/jszip.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/pdfmake.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/vfs_fonts.js}"></script>
<script th:src="@{/resources/plugins/datatables/buttons.html5.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/buttons.print.min.js}"></script>
<!-- Key Tables -->
<script th:src="@{/resources/plugins/datatables/dataTables.keyTable.min.js}"></script>
<!-- Responsive examples -->
<script th:src="@{/resources/plugins/datatables/dataTables.responsive.min.js}"></script>
<script th:src="@{/resources/plugins/datatables/responsive.bootstrap4.min.js}"></script>
<!-- Selection table -->
<script th:src="@{/resources/plugins/datatables/dataTables.select.min.js}"></script>
<script th:src="@{/resources/plugins/notifyjs/js/notify.js}"></script>
<script th:src="@{/resources/plugins/notifications/notify-metro.js}"></script>
<script th:src="@{/resources/assets/js/jquery.core.js}"></script>
<script th:src="@{/resources/assets/js/jquery.app.js}"></script>
<script th:if="${page == 'checkboxDatatable'}" th:src="@{/resources/plugins/datatables/datatables.min.js}"></script>
<script th:if="${page == 'checkboxDatatable'}"
th:src="@{/resources/plugins/datatables/dataTables.checkboxes.min.js}"></script>
<!--<script th:src="@{/resources/assets/pages/jquery.dashboard.js}"></script>-->
<script th:src="@{/resources/assets/pages/jquery.form-pickers.init.js}"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.counter').counterUp({
delay: 100,
time: 1200
});
$(".knob").knob();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Default Datatable
$('#datatable').DataTable();
// Key Tables
$('#key-table').DataTable({
keys: true
});
// Responsive Datatable
$('#responsive-datatable').DataTable();
// Multi Selection Datatable
$('#selection-datatable').DataTable({
select: {
style: 'multi'
}
});
} );
</script>
</block>
</html>
这是头部碎片。我在这里插入了 datetimepicker 插件。
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headFragment">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
<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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
<meta th:name="_csrf" th:content="${_csrf.token}"/>
<meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
<!-- Meta -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Triyakom Tools"/>
<meta name="author" content="Triyakom"/>
<!-- Favicon and Title -->
<link rel="shortcut icon" th:href="@{/resources/assets/images/favicon.ico}"/>
<title>CMS Monitoring Triyakom</title>
<!--Morris Chart CSS -->
<link rel="stylesheet" th:href="@{/resources/plugins/morris/morris.css}"/>
<!-- DataTables -->
<link th:href="@{/resources/plugins/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/resources/plugins/datatables/buttons.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
<!-- Responsive datatable examples -->
<link th:href="@{/resources/plugins/datatables/responsive.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
<!-- Multi Item Selection examples -->
<link th:href="@{/resources/plugins/datatables/select.bootstrap4.min.css}" rel="stylesheet" type="text/css"/>
<link href="https://lipis.github.io/bootstrap-sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/>
<link th:href="@{/resources/plugins/timepicker/bootstrap-timepicker.min.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/resources/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css}" rel="stylesheet"
type="text/css"/>
<link th:href="@{/resources/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" rel="stylesheet"
type="text/css"/>
<link th:href="@{/resources/plugins/clockpicker/css/bootstrap-clockpicker.min.css}" rel="stylesheet"
type="text/css"/>
<link th:href="@{/resources/plugins/bootstrap-daterangepicker/daterangepicker.css}" rel="stylesheet"
type="text/css"/>
<link th:href="@{/resources/assets/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/resources/assets/css/icons.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/resources/assets/css/style.css}" rel="stylesheet" type="text/css"/>
<link th:if="${page == 'checkboxDatatable'}"
th:href="@{/resources/plugins/datatables/awesome-bootstrap-checkbox.css}" rel="stylesheet" type="text/css"/>
<link th:if="${page == 'checkboxDatatable'}" th:href="@{/resources/plugins/datatables/dataTables.checkboxes.css}"
rel="stylesheet" type="text/css"/>
<script th:src="@{/resources/assets/js/modernizr.min.js}"></script>
<link th:href="@{/resources/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css}" rel="stylesheet"/>
<style>
th, td {
white-space: nowrap;
}
/*.object-hide {*/
/* display: none;*/
/*}*/
/*html, body, .content-page {*/
/* height: 100%;*/
/*}*/
/*#wrapper, .content-page {*/
/* min-height: 100%;*/
/*}*/
/*.content {*/
/* !*overflow: auto;*!*/
/* padding-bottom: 38.5667px; !* this needs to be bigger than footer height*!*/
/*}*/
/*footer {*/
/* z-index: 1;*/
/* margin-top: -38.5667px;*/
/* position: static;*/
/*}*/
</style>
</head>
</html>