Question

我已经编写了HTML的此页面，并且在处理事件时使用jQuery定位日期选择器控件时遇到问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DatePicker error</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <script src="/lib/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="/lib/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
    <script src="/lib/bootstrap-datepicker/dist/locales/bootstrap-datepicker.en-GB.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.en-GB.min.js" charset="UTF-8"></script>-->
</head>
<body>
    <div class="container body-content">

        <form id="createBooking" method="post" action="/Booking/Create">
            <div class="row" id="page1">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label" for="StartDateDate">From</label>
                        <input id="StartDateDate"
                               name="StartDateDate"
                               type="text"
                               data-date-format="dd/mm/yyyy"
                               value="18/10/2018"
                               Title="Create" class="form-control" data-date="10/18/2018" />

                        <span class="text-danger field-validation-valid" data-valmsg-for="StartDateDate" data-valmsg-replace="true"></span>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="EndDateDate">From</label>
                        <input id="EndDateDate"
                               name="EndDateDate"
                               type="text"
                               data-date-format="dd/mm/yyyy"
                               value="18/10/2018"
                               Title="Create" class="form-control" data-date="10/18/2018" />

                        <span class="text-danger field-validation-valid" data-valmsg-for="StartDateDate" data-valmsg-replace="true"></span>
                    </div>

                </div>
            </div>
        </form>


    </div>
    <script>
        console.log('Binding changeDate handlers');
        $('#EndDateDate').datepicker().on('changeDate', function (e) {
            //Script fails here with datepicker not defined...
            var startDate = $('#StartDateDate').datepicker('getDate');
            return true;
        });
        $('#StartDateDate').datepicker().on('changeDate', function (e) {
            //Script fails here with datepicker not defined...
            var endDate = $('#EndDateDate').datepicker('getDate');
            return true;
        });
<!--    </script>
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"></script>-->
</body>
</html>

但是，当我运行它时，它无法说出datepicker未在changeDate事件处理程序中定义。我指的是所有各种库的最新版本。

有人知道我在做什么错吗？附加事件后，它的定义正确，但选择器方法似乎没有它。

谢谢标记

Answer 1

如果取消注释顶部的cloudfare链接，它将起作用。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.en-GB.min.js" charset="UTF-8"></script>

这可能表明您的路径错误或该位置不存在文件。文件/lib/bootstrap-datepicker/dist/locales/bootstrap-datepicker.en-GB.min.js实际上存在吗？

在浏览器中按F12键并检查控制台。

Answer 2

我认为这归结于jQuery的多个包含。我希望它警告您它被包含不止一次！

为什么此页面中的时间选择器为空？

2 个答案: