jQuery datepicker not working in ASP.NET page

Question

I am using ASP.NET to develop a website and I am going to use the jQuery datepicker in my website. I used following code, but it won't work. Does anyone know why?

<link href="css/calendar/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
<script  src="jquery/calendar/jquery-1.4.4.min.js" type="text/javascript"></script>
<script  src="jquery/calendar/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>


<script type="text/javascript">
$(function() {
  $("#txtEventDate").datepicker();
}); 
</script>

Here is my textbox HTML code:

<asp:TextBox ID="txtEventDate" runat="server" Width="125px"></asp:TextBox>

digiguru · Accepted Answer · 2011-02-25 08:59:58Z

13

Perhaps the ID of the textbox isn't "txtEventDate" - it might be "ctrl00-ucDatePicker-txtEventDate" or something as asp.net tends to generate the IDs on the fly.

My suggestion is to either select it via a class you have assigned to the box, or

<asp:textbox id="txtEventDate" runat="server" cssclass="date-picker" />

then apply use a class selector rather than an ID selector

$(".date-picker").datepicker()

or if the javascript is in the page you could consider...

$("#<%= txtEventDate.ClientID %>").datepicker()

or you could try a partial ID picker

$("input[id*=txtEventDate]").datepicker()

There's three solutions for you!

edited Feb 25, 2011 at 8:59

answered Feb 25, 2011 at 8:39

digiguru

12.8k21 gold badges66 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don Thomas Boyle Over a year ago

The class selector didn't work for me, the other 2 however did. +1

krtek · Accepted Answer · 2011-02-25 08:30:21Z

0

try this for your javascript :

$(document).ready(function() {
  $("#txtEventDate").datepicker()
});

It could be really easier to help if you post the relevent part of the HTML code too (the one containing the element with the txtEventDate id).

answered Feb 25, 2011 at 8:30

krtek

26.7k5 gold badges60 silver badges84 bronze badges

Comments

kieran_delaney · Accepted Answer · 2011-02-25 09:58:28Z

Have you included the latest jQuery file, in addition to the jQuery UI? It's not obvious from your code.

You've not included any of the generated HTML either, but have you made sure the text input you have in your HTML code has the correct id set?

Also, you should try and make use of the .ready function so that the code only fires when ther DOM is fully loaded:

$(document).ready(function() {
  $("#txtEventDate").datepicker()
});

EDIT: You've now altered your code to show the inclusion of jQuery, but you haven't pasted the relevant HTML code as generated by ASP. I suspect that the issue is the input id is random generated and does not match #txtEventDate.

ANOTHER EDIT: You've now included the ASP code, but you still havent't included the generated HTML source for the input - as noted by most of the answers, ASP will likely include other information in your ID tag which is preventing jQuery from recognising it.

Vizaint · Accepted Answer · 2016-01-26 08:26:02Z

0

If you try use this datepicker in asp.formview in edit mode the problem is in FriendlyURL, the solution you make find Here.

answered Jan 26, 2016 at 8:26

Vizaint

12 bronze badges

Collectives™ on Stack Overflow

jQuery datepicker not working in ASP.NET page

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related