jQuery日期选择器未出现

Question

I am trying to add a jQuery datepicker in my asp.net web application with c#. So in the master page i have added these links and script.

 <link type="text/css" href="Styles/jquery.datepicker.css" rel="stylesheet" />
 <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="Scripts/jquery-ui-1.8.19.custom.min.js"></script>
      <script type="text/javascript" src="Scripts/jquery.datepicker.js"></script>

In my default aspx page i have added these codes.

             <script type="text/javascript">
                 // Localization

                 jQueryDatepicker.day_names_short = {
                     1: 'Mon',
                     2: 'Tue',
                     3: 'Wed',
                     4: 'Thu',
                     5: 'Fri',
                     6: 'Sat',
                     7: 'Sun'
                 };

                 jQueryDatepicker.day_names = {
                     1: 'Monday',
                     2: 'Tuesday',
                     3: 'Wednesday',
                     4: 'Thursday',
                     5: 'Friday',
                     6: 'Saturday',
                     7: 'Sunday'
                 };

                 jQueryDatepicker.month_names = {
                     1: 'January',
                     2: 'February',
                     3: 'March',
                     4: 'ApriL',
                     5: 'May',
                     6: 'June',
                     7: 'July',
                     8: 'AUgust',
                     9: 'September',
                     10: 'October',
                     11: 'November',
                     12: 'December'
                 };
                 $("#datepicker").datepicker({dateFormat:'dd-mm-yy'});

</script>
<div>
<b>Date:</b> 
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

</div>
<div class="some_datepicker" id="datepicker">

</div>

But still Datepicker is not getting displayed.

Do i need to add any other external links? Is there any other process where i can add the jQuery dat picker?

Answer 1

$(document).ready(function(){
      jQueryDatepicker.day_names_short = {
                     1: 'Mon',
                     2: 'Tue',
                     3: 'Wed',
                     4: 'Thu',
                     5: 'Fri',
                     6: 'Sat',
                     7: 'Sun'
                 };

                 jQueryDatepicker.day_names = {
                     1: 'Monday',
                     2: 'Tuesday',
                     3: 'Wednesday',
                     4: 'Thursday',
                     5: 'Friday',
                     6: 'Saturday',
                     7: 'Sunday'
                 };

                 jQueryDatepicker.month_names = {
                     1: 'January',
                     2: 'February',
                     3: 'March',
                     4: 'ApriL',
                     5: 'May',
                     6: 'June',
                     7: 'July',
                     8: 'AUgust',
                     9: 'September',
                     10: 'October',
                     11: 'November',
                     12: 'December'
                 };
                 $("#datepicker").datepicker({dateFormat:'dd-mm-yy'});
});

Use this. Your current JS code is executing before element is available in DOM.

Answer 2

Not sure what jQueryDatepicker.day_names_short etc are? It's not an object my JQuery libraries recognised.

You have an ASP Calendar control but then you're trying to get the JQuery Calendar to work off a div ?

Here's a workable example that'll help you:

<script type="text/javascript">
     $(document).ready(function () {
         $("#<%=DatePickerTextBox.ClientID%>").datepicker({ dateFormat: 'dd-mm-yy' });
     });
</script>
<asp:TextBox ID="DatePickerTextBox" runat="server" />