Getting jQuery datepicker to attach to a TextBox within a ListView

Question

I am using the jQuery Datepicker without any problem for TextBox controls that are non-templated. However, I am unable to get the datepicker to work with a TextBox that is in an EditItemTemplate of a ListView control. My latest attempt is to get a handle on this textbox by CSS class name "DateControl", any ideas?

<asp:ListVIew id="lvTest" runat="server">  
  <LayoutTemplate>...</LayoutTemplate>  
  <ItemTemplate>...</ItemTemplate>  
  <EditItemTemplate>  
     <tr>  
       <td>  
         <asp:TextBox ID="txtExpReceiveDate" runat="server" Text='<%#Eval("exp_receive_date","{0:dd-MMM-yy}") %>' CssClass="DateControl" />  
       </td>  
     </tr>  
  </EditTemplate>  
</asp:ListView>

<script type="text/javascript" language="javascript">  
   $(document).ready(function () {  
     $('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });  
   });  
</script>

Answer 1

You need a . at the beginning of a class name when selecting with jQuery (just like CSS):

$(document).ready(function () {  
  $('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });  
});  

Answer 2

This turned out to just be a case where I needed to attach the datepicker to my controls inside of...

function pageLoad(sender, args){}

instead of...

$(document).ready(function () {});

Answer 3

It's been a while since I used a ListView, but I think that the Edit controls are exposed dynamically - there's no postback.

So in order to attach to a dynamically included element, you'll need to use the new jquery live - not sure if you can do something like

$('.DateControl').live('click', function() {
  $('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });  
});

or if you have to attach that to the Edit event something like:

$("DateControl").live("showEdit", function(e, myName, myValue){
  $('.DateControl').datepick({ dateFormat: 'M-dd-yyyy' });  
});
$("EditControl").click(function () {
  $("DataControl").trigger("showEdit");
});

But that should be enough to get you started.