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=".10.3/themes/smoothness/jquery-ui.css" />
     <script src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>      
     <link href=".8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">   
     <script src=".9.1.js"></script>    
     <script src=".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

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./ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>      
     <link href="http://ajax.googleapis./ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">   
     <script src="http://code.jquery./jquery-1.9.1.js"></script>    
     <script src="http://code.jquery./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

• javascript
• jquery

• Please, replace your asp code by browser's html code. – Reporter Commented Sep 4, 2013 at 12:08
• 1 You are using multiple versions of jquery together? – Quicksilver Commented Sep 4, 2013 at 12:11
• 1 @QuickSilver I think it is not an issue, check this jsfiddle jsfiddle/EZdNe – Praveen Commented Sep 4, 2013 at 12:15
• 1 you're jquery selectors don't match the id's of your inputs – andrew Commented Sep 4, 2013 at 12:21

2 Answers 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./ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery./jquery-1.9.1.js"></script>
    <script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
          $(document).ready(function () {
             $("#startDate").datepicker();
             $("#endDate").datepicker();
         });
    </script>

You're referring wrong selector(ID mismatch)

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

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

Also why are having 2 different css files?

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

This may lead to CSS Conflict.