Question

i am trying to display jquery calendar but somehow its just ignoring my request and i did debug and everything seems okay but not sure…. here is my code

<form id="form1" runat="server">
<ul>
    <li id='visitStartDate' class="DateCal">Start Date</span>
        <asp:TextBox ID="txtStartDate" runat="server" Width="100" CssClass='cal' />
    </li>
    <li id="visitEndDate" class="DateCal">End Date</span>
        <asp:TextBox ID="txtEndDate" runat="server" Width="100" CssClass='cal' />
    </li>
</ul>
</form>


<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>



<script language="javascript" type="text/javascript">
         jQuery(document).ready(function () {
             $("[id*='Visit_txtStartDate'],[id*='Visit_txtEndDate']").datepicker({
                 showOtherMonths: true,
                 selectOtherMonths: true,
                 onSelect: function () {
                     $(this).trigger('change');
                 }
             });

         });                                                 
</script> 

Answer 1

Your jQuery selector is incorrect:

Try the ends with selector: http://api.jquery.com/attribute-ends-with-selector/

e.g.

[id$="txtEndDate"]

so your code becomes:

$("[id$='txtStartDate'],[id$='txtEndDate']").datepicker({ ... });

if, on the other hand, you are wanting to select all elements with the class cal you can use the class selector:

e.g.

$(".cal").datepicker()