Search code examples
jqueryasp.netdatapicker

datepicker not showing calendar in IE11

I'm currently having some troubles with datepicker in IE11. When I click on my textbox it works at least so far that an "x" is displayed on the right end of the textbox to delete its content. BUT the calendar itself is not shown.

When I tried to use textmode="DATE" instead of the jquery datapicker it resulted in the same end result. I'm using a master / content layout and the jquery import is on the master page.

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

<script type="text/html">
     $(document).ready(function () {
        $("#<%= DisplayFromDateTextBox.ClientID %>").datepicker();
        $("#<%= DisplayToDateTextBox.ClientID   %>").datepicker();
    });
</script>

<div>
    Welche Tage sollen angezeigt werden:
    <asp:TextBox runat="server" ID="DisplayFromDateTextBox"></asp:TextBox>
    Bis
    <asp:TextBox runat="server" ID="DisplayToDateTextBox"></asp:TextBox>
    <asp:Button runat="server" ID="DisplayButton" OnClick="DisplayButton_Click" Text="Anzeigen"/>
</div>

<asp:ListBox ID="JournalListBox" runat="server" Height="531px" Width="593px"></asp:ListBox>

In the master page I include jquery this way:

Edit: When I click into the text field (first one) the effect is as shown in the image below: enter image description here

Update: When I removed the redundant parts of the ready function as proposed in the comments I made some erros. After correcting them I got a .js error when executing ready: $("#MainContent_DisplayFromDateTextBox").datepicker(); brings the error that the object or method does not support datepicker. This final problem was caused due to interference of an automatically created scriptreference to jquery which caused the manual include of jquery to malfunction.

Solution

  • You can try for this in this way

    1. Master Page

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication2.SiteMaster" %>

<!DOCTYPE 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 %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <form runat="server">
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
        </div>
    </form>
</body>
</html>

    2. Default.aspx

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        Welche Tage sollen angezeigt werden:
    <asp:TextBox runat="server" ID="DisplayFromDateTextBox"></asp:TextBox>
        Bis
    <asp:TextBox runat="server" ID="DisplayToDateTextBox"></asp:TextBox>
        <asp:Button runat="server" ID="DisplayButton" Text="Anzeigen" />
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%= DisplayFromDateTextBox.ClientID %>").datepicker();
            $("#<%= DisplayToDateTextBox.ClientID   %>").datepicker();
        });
    </script>
</asp:Content>

    I Hope this will help you @Thomas.