Using JQuery datepicker() in DetailsView insert/Edit templates

Question

I am having a hard time getting the jquery datepicker to work with my DetailsView insert template. I have tried numorous ways of trying to get this to work and I have not been successful inside of the Template control. The code works fine outside of the DetailsView, but I need it inside. Here is my code:

<link href="jquery-ui-1.7.3.custom.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src"jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" language="javascript" src"jquery-1.6.2.min.js"></script>

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

function pageLoad(sender, args) 
    {
        $('.DateControl').datepicker();
    };
</script>

<asp:templatefield HeaderText="Action Date" SortExpression="Action_Date">
    <InsertItemTemplate>
        <asp:Textbox runat="server" Text='<%# Bind("Action_Date") %>' id="textAction" CssClass="DateControl">
        </asp:textBox>
    </InsertItemTemplate>

</script>

Any help on what I could possibly doing wrong would be helpful. oh, and I am working with SharePoint and I will not be able to use the Ajax Controls for a datepicker.

Answer 1

Have you used Firebug (or similar) to verify that your pageLoad() function is being called? For use with jQuery, I've found the following notation to be much more common, for code which must be executed just once, when the page loads:

$(function () {
  // any code in here, is run only once, when the page loads.
});

My understanding is that there can be name-collisions with pageLoad(), whereas the notation above is more reliable.

At a glance, your datepicker intialization code itself seems correct.