javascript - JQuery datepicker not showing properly with css - Stack Overflow

admin管理员组

文章数量:1421749

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

Share Improve this question Follow edited Sep 4, 2013 at 13:20 user1960836 asked Sep 4, 2013 at 12:05 user1960836user1960836 1,78288 gold badges3131 silver badges4949 bronze badges 4

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

本文标签： javascriptJQuery datepicker not showing properly with cssStack Overflow