Bootstrap Datepicker 不工作。使用 BootStrap 3.3.1

Posted 2023-05-07

【中文标题】Bootstrap Datepicker 不工作。使用 BootStrap 3.3.1

【英文标题】：Bootstrap Datepicker is not Working .Using BootStrap 3.3.1

【发布时间】：2015-01-25 17:13:50

【问题描述】：

首先我从下面的链接下载了 zip 文件 http://www.eyecon.ro/bootstrap-datepicker/ 我得到了以下结构 1.CSS文件夹——datepicker.css 2.JS文件夹-bootstrap-datepicker.js 3.less文件夹-datepicker.less

然后我将它添加到我的 asp.net mvc 4 项目结构中 在 index.cshtml 中我添加了引用 那么下面是我的代码

<script src="http://code.jquery.com/jquery.js"></script>
    <script src="~/Contents/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Contents/bootstrap/js/npm.js"></script>
    <script src="~/Contents/bootstrap/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
        $(function () 
            $('#datetimepicker9').datepicker();
            $('#datetimepicker10').datepicker();
            $("#datetimepicker9").onclick ("dp.change", function (e) 
                $('#datetimepicker10').data("DateTimePicker").setDate(e.date);
            );
            $("#datetimepicker10").onclick("dp.change", function (e) 
               $('#datetimepicker9').data("DateTimePicker").setDate(e.date);
            );
        );
    </script>


<div class="searchDatePickerRow">
            <div class="searchFrmDate">
                <form class="formMargin" role="form">
                    <div class="form-group">
                <div class="input-group date" id="datetimepicker9">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
                </form>
            </div>
            <div class="searchToDate">
                <form class="formMargin" role="form">
                    <div class="form-group">
                <div class="input-group date " id="datetimepicker10">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
                </form>
            </div>
        </div>

但是当我点击日历图像时，日期选择器不起作用。 我已经按照下面的链接 How do I get bootstrap-datepicker to work with Bootstrap 3? Bootstrap-Datetimepicker Not working 但没有取得任何成功。在上面的链接中提到添加 datetimepicker.js 和 moment.js 但我将从哪里得到这个文件。

【问题讨论】：

在页面上，在控制台中尝试此代码并检查它给出的错误。 $('#datetimepicker9').datepicker();

它显示以下错误类型错误-日期未定义

我已经更新了上面的评论 TypeError- Date is undefind

Check this

该链接还包含 BS 2 而非 BS 3.3 的标记。您需要获得与 BS 3 兼容的版本。

【参考方案1】：

你没有添加bootstrap-datepicker.css 在bootstrap.css. 之后添加datepicker.css 您可以从此网址获取 http://www.eyecon.ro/bootstrap-datepicker/

然后在下面调用这个javascript：

$('.datepicker').datepicker();

【参考方案2】：

您错过了输入类中的类日期选择器或数据属性。你必须在你的输入标签中添加它。

<input class="datepicker" data-provide="datepicker">

【讨论】：

添加了上述类以及数据提供者，但它不起作用