CODEWITHSUNDEEP
javascriptasp.netjquery-ui
Technology Addict
Technology Addict

Reputation: 47

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

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:

enter image description here

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:

enter image description here

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.

enter image description here

Upvotes: 0

Views: 5087

Answers (2)

Gabe
Gabe

Reputation: 50533

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

Upvotes: 1

James Fernandes
James Fernandes

Reputation: 124

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

Upvotes: 0

Related Questions