Can't bind JQuery Datepicker with asp:TextBox in sharepoint

Question

Hi everybody. I have the next trouble. I am creating the web part in sharepoint. I need a Jquery datepicker. When i try to bind it with the html textbox it works. But when i try to bind it with the Asp:textbox it doesn't work. Does anyone have any ideas? Thanks. I will appreciate any help.

<script type="text/javascript">
    $(document).ready(function() {
        $('#tbDateOfPurchase').datepicker();
    });
</script>


<asp:TextBox ID="tbDateOfPurchase" runat="server"></asp:TextBox> //doesn't work
<input id="tbDateOfPurchase" type="text" /> //works

Answer 1

You need to change the id in your jquery selector as the id at design time is not the rendered to client id. Check your html and see what the rendered id is.

Answer 2

This should work:

<script type="text/javascript">
    $(document).ready(function() {
        $('input[id$=_tbDateOfPurchase]').datepicker();
    });
</script>    

Like @redsquare noted it is the server side ID of the Textbox transforming into something else altogether on the client that is causing this.

The above code selects all the input elements that has a client id ending with _tbDateOfPurchase using Attribute Ends With Selector [name$=value]