ASP.net and JQuery UI Datepicker

Question

Given:

<input id="datepicker" type="text" />

Where the id = datepicker tells the javascript to attach all the datepicker code to the form element, how do I turn this into a server control?

For example:

<input runat="server" id="datepicker" type="text" />

Doesn't work because ASP.net generates it's own ID's.

Edit

<asp:TextBox runat="server" ID="dateTo" class="datepicker"></asp:TextBox>

Renders as

<input name="ctl00$mainContent$dateTo" type="text" id="ctl00_mainContent_dateTo" class="datepicker" />

And doesn't work!

Michael Baldry · Accepted Answer · 2010-09-06 08:47:27Z

5

I think it's a good practice to have a class which triggers a date picker to be created for everything that has it, such as 'js-date-picker'

then to avoid duplication of code, you can just write the following JS once:

$(document).ready(function() { 
    $(".js-date-picker").datepicker();
});

to get ASP.net to set a class on the textbox correctly so it uses this class, just add CssClass="js-date-picker" to the tag:

<asp:TextBox runat="server" ID="dateTo" CssClass="js-date-picker" />

Hope this clarifies things for you.

answered Sep 6, 2010 at 8:47

Michael Baldry

2,0482 gold badges16 silver badges30 bronze badges

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

Comments

Stefanvds · Accepted Answer · 2010-09-06 08:51:29Z

3

It's not a good idea to bind a datepicker to an ID. better is to give it to the class (in asp.net: CssClass) then, multiple inputs can have datepickers. so in short, bind the datepicker to a class. This also fixes your asp.net problem about the ID's

<input id="aspid" class="datepicker" type="text" />

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

then in your jquery selector:

 $(".datepicker").datepicker()

edited Sep 6, 2010 at 8:51

answered Sep 6, 2010 at 8:32

Stefanvds

5,9065 gold badges51 silver badges73 bronze badges

1 Comment

Tom Gullen Over a year ago

Setting class="datepicker" doesn't seem to work with jquery-ui

Tom Gullen · Accepted Answer · 2010-09-06 08:39:22Z

0

You need to reference the client ID of the control in the Jquery datepicker initialisation, like such:

$(function() {
    $("#<%=dateTo.ClientID %>").datepicker();
});

Seems to work :)

answered Sep 6, 2010 at 8:39

Tom Gullen

61.9k89 gold badges294 silver badges472 bronze badges

1 Comment

Stefanvds Over a year ago

but it aint very extendable now is it... if you place the jquery binding code in your masterpage, then, to make a datepicker, the only thing you need to do is add the CssClass to your input and you're done.

thunderblaster · Accepted Answer · 2014-01-24 19:03:40Z

0

Simple!! Use clientidmode="static" in your input text control.

Example- input runat="server" id="datepicker" type="text" clientidmode="Static"

This should solve your problem.

edited Jan 24, 2014 at 19:03

thunderblaster

91811 silver badges27 bronze badges

answered Jan 24, 2014 at 18:41

Ramya

1

Collectives™ on Stack Overflow

ASP.net and JQuery UI Datepicker

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related