Mikkel Mikkel - 6 months ago 29
Javascript Question

Bootstrap datepicker doesn't work in Asp.net Website

I'm trying to get the datepicker working in my asp website. Have made an booking page, where i want to use two datepickers, for checking in and out.

It works visually, so the css is working, but when you click the icon or textbox nothing is happening.

Code of 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>


Have installed via NuGet in Visual Studio the "Bootstrap 3 datetimepicker" and "Bootstrap 3 datetimepicker"

My head html code where i have imported js and 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>


Have read other post inside here, where they suggest things like moving links to js around, but none have worked.

The install page of how to install it via NuGet is found here: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/#nuget

Can any one see what the problem is?

Answer

Short Answer

You need to load moment-with-locales.min.js not moment.min.js. Otherwise, your locale: 'ru' will not work. I.e. you need:

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

Here's the actual error that you'll otherwise receive.

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

Example

I have it working on my machine. In my head I have this:

<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" />

In my body I have this:

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

It works beautifully and renders in Russian.

Russian Date Picker

Other Notes

  • It looks like you're loading some resources twice. For instance, you're loading jQuery and bootstrap both with an HTML <script> tag and also using an ASP.NET ScriptReference tag. That's redundant. Also, you're loading both the minified and the un-minified versions of the date time picker. Only load one.
  • Also, watch the order of your dependencies. For instance, you're loading moment.js after you're loading bootstrap-datetimepicker.js. Make sure you load moment first because the date time picker depends on it.