Question

我试图限制日期，因此datepicker1不能大于datepicker2，而datepicker2不能小于datepicker1。我开始使用：https://eonasdan.github.io/bootstrap-datetimepicker/（链接选择器）。这并不限制日期输入。所以我找到Restrict date in jquery datepicker based on another datepicker or textbox但是，这些答案都没有限制日期输入。

我能猜到的最好的是我有一个缺少的库/ src。

我的jQuery是（你可以看到我试过的所有例子，有些没有重新格式化日期）：

<!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>

HTML是：

np.sort

Answer 1

我遇到过这个，也许这对你有帮助。

<script type="text/javascript">
    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

Bootstrap datepicker根据其他日期输入设置最大值和最小值

1 个答案: