CODEWITHSUNDEEP
javascriptjquery
user1960836
user1960836

Reputation: 1782

JQuery datepicker not showing properly with css

My problem is that the calender doesn't show properly (not using googles css) Here is my code:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>      
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">   
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>    
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <script>
         $(function () {
             $("#MainContent_startDate").datepicker();
             $("#MainContent_endDate").datepicker();
         });
     </script>
</asp:Content>


<asp:TextBox ID="startDate" CssClass="InfoData" runat="server" TextMode="Date" Visible="false"></asp:TextBox>

<asp:TextBox ID="endDate" CssClass="InfoData" runat="server" TextMode="Date" Visible="false"></asp:TextBox>

I have tried using IE, FF and Chrome. In IE it says at the bottom: "Only safe content is shown". If I then click "Show all content", then the datepicker shows properly with googles css. But in FF and Chrome I don't get this possibility. But I don't think that it should ask this at all, it should just show the datepicker with the right css, as shown on the jquery example. Any idea? I saw a many topics with this issue, but not exactly the same as mine

Thanks in advance

enter image description here

Upvotes: 0

Views: 11333

Answers (2)

Adriien M
Adriien M

Reputation: 1185

In your TextBox control add ClientIDMode="Static" to match the ID selector like

    <asp:TextBox ID="endDate" ClientIDMode="Static" runat="server" />

Then keep this header only and datetimepicker should work

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
          $(document).ready(function () {
             $("#startDate").datepicker();
             $("#endDate").datepicker();
         });
    </script>

Upvotes: 2

Praveen
Praveen

Reputation: 56509

You're referring wrong selector(ID mismatch)

  $(function () {
                 $("#startDate").datepicker();
                 $("#endDate").datepicker();
             });

check this http://jsfiddle.net/EZdNe/1/

Also why are having 2 different css files?

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />   
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">

This may lead to CSS Conflict.

Upvotes: 0

Related Questions