Bootstrap datepicker doesn't work in Asp.net Website

Question

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?

Why are you turning a div into a datepicker instead of an input? — mason
– mason, Commented Jun 29, 2015 at 19:06
@mason The demo on the plugin's page uses a div that wraps an input. eonasdan.github.io/bootstrap-datetimepicker — Shaun Luttin
– Shaun Luttin, Commented Jun 29, 2015 at 19:12
@ShaunLuttin Doesn't make sense to me. I wouldn't use something that breaks the paradigm like that. Any sort of selectable input should be an <input> element. A <div> has no reason to allow you to select a date. — mason
– mason, Commented Jun 29, 2015 at 19:14
@mason The div is wrapping an input. That's the paradigm that bootstrap uses: getbootstrap.com/css/#forms-example Search the page for input-group and you'll see that paradigm 11 times. — Shaun Luttin
– Shaun Luttin, Commented Jun 29, 2015 at 19:17
@ShaunLuttin You've misunderstood the Bootstrap paradigm. The div is not intended to function as an input in Bootstrap, it's supposed to group together a set of elements dealing with an input. — mason
– mason, Commented Jun 29, 2015 at 19:23

Shaun Luttin · Accepted Answer · 2015-06-29 19:15:08Z

1

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.

edited Jun 29, 2015 at 19:15

answered Jun 29, 2015 at 18:54

Shaun Luttin

143k93 gold badges442 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mikkel Over a year ago

I just got back from a movie.. sorry for the late response, i'm trying this out now.. thanks for fast response!

Mikkel Over a year ago

Works good... it was the files which should be placed as you said.. many thanks.

PK-1825 · Accepted Answer · 2016-05-15 07:39:06Z

Just Try This, Hope it will Help you

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

Collectives™ on Stack Overflow

Bootstrap datepicker doesn't work in Asp.net Website

2 Answers 2

Short Answer

Example

Other Notes

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Short Answer

Example

Other Notes

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related