jquery datepicker

Question

For some reason I can't use runat="server" as an attribute for the input tag in order for the jQuery to display the image button and work. Is something wrong without runat="server"? It works fine. And I want the format to be "yyyy/mm/dd" and also I need it for the server because this is where I check to see if the date manually entered is a valid date and that it matches the accepted format. I really want to use an asp:button but since I can't use runat="server" attribute I don't know what to do since that is required for asp controls

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

  $(document).ready(function(){
    $("#datepicker").datepicker({ showOn: "both", 
                                  buttonImage: "/Content/img/calendar.gif", 
                                  buttonImageOnly: true });
  }); 

</script>

Answer 1

it changes your id from "#datepicker" to "form1_ctl01_ctl05_datepicker" or something when you use runat='server'

EDIT: For a solution, you could pick it up based on css class rather than ID

<input id='datepicker' runat='server' class='datepicker' />

$(document).ready(function(){
$(".datepicker").datepicker({ showOn: "both", 
                              buttonImage: "/Content/img/calendar.gif", 
                              buttonImageOnly: true });
});

Answer 2

For controls with runat="server", aspnet generates its own, rather ugly ids for the rendered html controls.

If your script is on actual page, you can replace
$("#datepicker") with $("#<%= datepicker.ClientID %>"),
which will output the mangled id that aspnet generates, or, as Jimmy suggested, target it with a css class instead.