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();
});