【问题标题】：Bootstrap datepicker doesn't work in Asp.net Website引导日期选择器在 Asp.net 网站中不起作用
【发布时间】：2015-06-29 18:27:19
【问题描述】：

我正试图让日期选择器在我的 asp 网站上工作。已经制作了一个预订页面，我想在其中使用两个日期选择器来办理入住和退房。

它在视觉上可以正常工作，因此 css 可以正常工作，但是当您单击图标或文本框时，什么也没有发生。

预订代码.aspx：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="headline">
                <h3>BOOKING</h3>
                <hr />
            </div>
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

</asp:Content>

已在 Visual Studio 中通过 NuGet 安装“Bootstrap 3 datetimepicker”和“Bootstrap 3 datetimepicker”

我的头html代码在哪里导入了js和css：

<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - M-Hotels</title>

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>

<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>

<!-- CSS Files -->
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/font-awesome.css" rel="stylesheet" />
<link href="Content/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />

<!-- js Files -->
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.min.js"></script>    
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<script src="Scripts/bootstrap-datetimepicker.min.js"></script>   
<script src="Scripts/moment.js"></script>

<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>

<form runat="server">
    <asp:ScriptManager runat="server">
        <Scripts>
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="bootstrap" />
            <asp:ScriptReference Name="respond" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

在这里阅读了其他帖子，他们建议将链接移动到 js，但没有一个有效。

如何通过 NuGet 安装它的安装页面在这里找到：http://eonasdan.github.io/bootstrap-datetimepicker/Installing/#nuget

谁能看出问题出在哪里？

【问题讨论】：

你为什么要把 div 变成日期选择器而不是 input？
@mason 插件页面上的演示使用 div 包装了 input。 eonasdan.github.io/bootstrap-datetimepicker
@ShaunLuttin 对我来说没有意义。我不会使用像那样打破范式的东西。任何类型的可选输入都应该是<input> 元素。 <div> 没有理由让您选择日期。
@mason div 正在包装 input。这就是 bootstrap 使用的范例：getbootstrap.com/css/#forms-example 在页面中搜索 input-group，您会看到该范例 11 次。
@ShaunLuttin 您误解了 Bootstrap 范式。 div 不打算用作 Bootstrap 中的输入，它应该将一组处理输入的元素组合在一起。

标签： javascript asp.net twitter-bootstrap

【解决方案1】：

简答

您需要加载moment-with-locales.min.js 而不是moment.min.js。否则，您的locale: 'ru' 将不起作用。 IE。你需要：

<script src="~/Scripts/moment-with-locales.min.js"></script>
@*<script src="~/Scripts/moment.min.js"></script>*@

这是您将收到的实际错误。

TypeError: locale() locale ru is not loaded from moment locales!

示例

我让它在我的机器上运行。在我的head 我有这个：

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/moment-with-locales.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

在我的body 我有这个：

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="headline">
                <h3>BOOKING</h3>
                <hr />
            </div>
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

它运行良好，并以俄语呈现。

其他说明

您似乎要加载一些资源两次。例如，您正在使用 HTML <script> 标签和 ASP.NET ScriptReference 标签加载 jQuery 和引导程序。那是多余的。此外，您正在加载日期时间选择器的缩小版本和未缩小版本。只加载一个。
另外，请注意依赖项的顺序。例如，您在加载 bootstrap-datetimepicker.js 之后加载 moment.js。确保首先加载时刻，因为日期时间选择器取决于它。

【讨论】：

我刚看完电影回来..抱歉回复晚了，我现在正在尝试..感谢您的快速回复！
效果很好...应该按照您所说的放置文件...非常感谢。

【解决方案2】：

试试这个，希望对你有帮助

<div class="form-group">
      <asp:Label ID="Label6" runat="server" Text="Payment Promised Date" AssociatedControlID="txtPromisedPayment"></asp:Label>
         <div class='input-group date' id='datetimepicker1'>
            <asp:TextBox ID="txtPromisedPayment" runat="server" CssClass="form-control"></asp:TextBox>
               <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span></span>
           </div>
           <div class="col-md-4">
               <asp:RequiredFieldValidator ID="rfvDateTime" ControlToValidate="datetimepicker4" ValidationGroup="orderProcess" runat="server" ForeColor="Red" ErrorMessage="* Please Enter Date and Time"></asp:RequiredFieldValidator>
            </div>
          </div>


<link href="../Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="../Scripts/moment.min.js"></script>
    <script src="../Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker({
            });
        });
    </script>

【讨论】：