【发布时间】：2018-06-07 07:27:50
【问题描述】：
我试图限制日期，因此 datepicker1 不能大于 datepicker2 并且 datepicker2 不能小于 datepicker1。我从：https://eonasdan.github.io/bootstrap-datetimepicker/（链接选择器）开始。这并不限制日期输入。于是我找到了Restrict date in jquery datepicker based on another datepicker or textbox 但是，这些答案都没有限制日期输入。
我能猜到的最好的结果是我缺少一个库/src。
我的 jQuery 是（你可以看到我尝试过的所有示例，有些没有重新格式化日期）：
$(function(){
$("#includedContent").load("Menu.html");
// $("#datepicker1").datepicker({
// showOn: "both",
// format: 'dd/mm/yyyy',
// onSelect: function(dateText, inst){
// $("#datepicker2").datepicker("option","minDate",
// $("#datepicker1").datepicker("getDate"));
// }
// });
//
// $("#datepicker2").datepicker({
// showOn: "both",
// format: 'dd/mm/yyyy',
// onSelect: function(dateText, inst){
// $("#datepicker1").datepicker("option","maxDate",
// $("#datepicker2").datepicker("getDate"));
// }
// });
// $("#datepicker1").datepicker({
// showOn: "both",
// format: 'dd/mm/yyyy', //date formated correctly
// maxDate: $("#datepicker2").datepicker("getDate")
// });
// $("#datepicker2").datepicker({
// showOn: "both",
// format: 'dd/mm/yyyy', //Does not format the address it is returned as mm/dd/yyyy
// minDate: $("#datepicker1").datepicker("getDate")
// });
$("#datepicker1").datepicker({
dateFormat: 'dd/mm/yyyy', //Does not format the address it is returned as mm/dd/yyyy
inline: true,
maxDate: $("#datepicker2").datepicker("getDate") });
$("#datepicker2").datepicker({
dateFormat: 'dd/mm/yyyy', //Does not format the address it is returned as mm/dd/yyyy
inline: true,
minDate: $("#datepicker1").datepicker("getDate") });
// $('#datepicker1').datepicker({
// format: 'dd/mm/yyyy',
// });
// $('#datepicker2').datepicker({
// useCurrent: false, //Important! See issue #1075
// format: 'dd/mm/yyyy',
// });
// $("#datepicker1").on("dp.change", function (e) {
// $('#datepicker2').data("DatePicker").minDate(e.date);
// });
// $("#datepicker2").on("dp.change", function (e) {
// $('#datepicker1').data("DatePicker").maxDate(e.date);
// });
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
}); // end document.ready
HTML 是：
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id="cubAwards" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<form data-toggle="validator" role="form" id="showYMAwards">
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="jumbotron">
<h3>Group Summary</h3>
<button type='button' class='btn btn-primary btn-lg' id='exportDetails'>Export Details</button>
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class='input-group date' id='datepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="form-group">
<div class='input-group date' id='datepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!-- Place for Awards -->
<div class="input-select" id="img-container1">
</div>
</div>
</div>
</div>
</form>
</div> <!-- /container -->
<div style="text-align: center;">
<span id="ajaxGetUserServletResponse" style="color: red;"></span>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
<script src="js/groupSummary-ajax.js"></script>
</body>
</html>
【问题讨论】：
标签： jquery html twitter-bootstrap