Getting JQuery DateTimePicker add-on to work with asp.net textbox

Question

I have been trying to make JQuery DateTimePicker add-on to work with asp.net textbox for over a week. I simply can't get it and I don't know why.

Could you please help me in getting it work?

ASP.NET code:

<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" Runat="Server">
<style type="text/css">
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
</style>

<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        $("#start_DateTime").datetimepicker();
        $("#end_DateTime").datetimepicker();
    });
</script> 

<label for="start_DateTime">
                            Start Date & Time</label>
                        <asp:TextBox ID="start_DateTime" CssClass="textarea" runat="server"></asp:TextBox> </asp:Content>

Nothing shown in this textbox. Also, before browsing the page in the Internet Explorer, I got the following error message and I don't know why:

UPDATE:

I modified my code to include

$('#' + '<%= start_DateTime.ClientID %>').datetimepicker();

Instead of

$("#start_DateTime").datetimepicker();

and I am still getting the same error. When I run the Jscript debugger in the IE, it shows me the following:

UPDATE #2:

Finally I got it but I don't know why it appears at the top of the textbox. It should be appeared at underneath it and to the right.

Answer 1

Load the timepicker add-on AFTER the jquery ui. The datetimepicker add-on has dependencies with jquery ui.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

Try:

$('#' + '<%= start_DateTime.ClientID %>').datetimepicker();

If you don't account for the id that is generated by asp.net you could do it by a class instead.

<asp:TextBox ID="start_DateTime" CssClass="textarea datepicker" runat="server"></asp:TextBox>


$(function(){
   $(".datepicker").datetimepicker();
});

Answer 2

ASP.NET renames the ID attribute dynamically at runtime, so if you view your HTML source in the browser, you'll see that "start_DateTime" is only a small part of the rendered ID tag.

You can get the rendered ID with some effort, but have you instead considered using the following library that is built to use JQueryUI in ASP.NET?

http://juiceui.com