[英]Bootstrap datepicker doesn't work in Asp.net Website
我试图在我的asp网站上使datepicker工作。 已经做了一个预订页面，我要在其中使用两个日期选择器进行签入和签出。
它在视觉上可以正常工作，因此CSS可以正常工作，但是当您单击图标或文本框时，没有任何反应。
booking.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”
我导入了js和css的我的头html代码：
<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
谁能看到问题所在？
您需要加载moment-with-locales.min.js而不是moment.min.js 。 否则，您的locale: 'ru'将不起作用。 即您需要：
<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>
它工作精美，并用俄语渲染。
<script>标记和ASP.NET ScriptReference标记加载jQuery和引导程序。 那是多余的。 另外，您正在加载日期时间选择器的缩小版本和未缩小版本。 仅加载一个。 bootstrap-datetimepicker.js之后再加载moment.js 。 确保首先加载时刻，因为日期时间选择器取决于该时刻。 尝试一下，希望对您有所帮助
<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>
bootstrap datatable javascript在asp.net Repeater中不起作用
[英]bootstrap datatable javascript doesn't work in asp.net Repeater
Bootstrap navbar mega menu 在 Asp.Net Core 上不起作用
[英]Bootstrap navbar mega menu doesn't work on Asp.Net Core
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.