ASP.net and JQuery UI Datepicker

Question

Given:

Where the id = datepicker tells the javascript to attach all the datepicker code to

Answer 1

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

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

This should solve your problem.

Answer 2

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

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

Seems to work :)

Answer 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()

Answer 4

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.