JQuery datepicker not showing properly with css

Question

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

@QuickSilver I think it is not an issue, check this jsfiddle jsfiddle.net/EZdNe — Praveen
– Praveen, Commented Sep 4, 2013 at 12:15

Adriien M · Accepted Answer · 2013-09-04 13:09:28Z

2

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>

answered Sep 4, 2013 at 13:09

Adriien M

1,1857 silver badges6 bronze badges

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

Comments

Praveen · Accepted Answer · 2013-09-04 12:30:27Z

0

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.

edited Sep 4, 2013 at 12:30

answered Sep 4, 2013 at 12:23

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

3 Comments

user1960836 Over a year ago

Hi. Thanks for the respond. The IDs should work, those aren't then right IDs, I just added them here on stackoverflow. The date does show according to the ID, it just doesn't use the css from google. About using 2 css files. I just forgot to remove the 2nd one, it was from a desparate attemt, when I had no more options

user1960836 Over a year ago

I have added a screenshot so that you can see the issue. You can see it on top with my first post.

Praveen Over a year ago

This seems to be css conflict. Better check with other stylesheets whether any style is getting override.

Collectives™ on Stack Overflow

JQuery datepicker not showing properly with css

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related