Learning jQuery

jQuery UI has collection of couple of cool control like DatePicker, Tabs, Dialog, Button etc. See list of all the control provides by jQuery UI. In this post, we will be looking at datepicker() control. First of all, to start with jQuery UI, you need to download latest jQuery UI from here.

To start first,we need to include jQueryUI js and jQueryUI Css file on top.

<link href="~/CSS/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-ui-1.7.2.min.js"></script>

Place a textbox on the page, which will be used to bind the datepicker control to it.

<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>

Now let's place the datepicker control. Well, it's really simple.

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

That's it. Now when you run this and take the cursor in textbox,Datepicker gets opened.I told you it's really simple. Now what next? Wait, this particular controls has variety of options. Let's see some of them.

changeMonth: When set to true, you will see a drop down of month in the datepicker.

$("#<%=txtDate.ClientID %>").datepicker({changeMonth:true});

changeYear: When set to true, you will see a drop down of year in the datepicker. By default it shows 10 previous and 10 next year from the current year.

$("#<%=txtDate.ClientID %>").datepicker({changeMonth:true, changeYear:true});

yearRange: You can override the default setting of showing years in dropdown. In below code, I have displayed year range from current year - 50 till current year.

$("#<%=txtDate.ClientID%>").datepicker
("option", "yearRange", 
'<%=(System.DateTime.Now.Year - 50).ToString()%> :<%=System.DateTime.Now.Year.ToString() %>');

setDate: To show today's date by default in the text box.

$("#<%=txtDate.ClientID%>").datepicker('setDate', 'today');

showOn: This defines that how you would want to display the datepicker. Default is focus. That is when you take cursor on textbox, it displays the datepicker. Other option is 'button'.Now you will see a datepicker icon next to textbox. When you click the datepicker icon the datepicker gets opened.

$("#<%=txtDate.ClientID %>").datepicker({showOn: 'button'});

buttonText: By default, button will not have any text on it. You can assign text to the button via buttonText property.

$("#<%=txtDate.ClientID %>").datepicker(
{
 showOn: 'button',
 buttonText:'Show Date'
});

buttonImage: This option when set display an image icon (specified in the path), instead of button.

$("#<%=txtDate.ClientID %>").datepicker(
{
  showOn: 'button',
  buttonText:'Show Date',
  buttonImage:'Control/Images/imgCalendar.png' 
});

showAnim: This option provides an animation effect that how datepicker is displayed. In below code, I have used 'fadeIn' effect. To see list of all the effect click here.

$("#<%=txtDate.ClientID %>").datepicker(
{
   showOn: 'button',
   buttonText:'Show Date',
   buttonImage: 'Control/Images/imgCalendar.png',
   showAnim: 'fadeIn'
}
);

dateFormat: You can change the way date format is displayed in the textbox. This format will display the date like Wednesday, June 27, 2010. To see list of all the formats click here.

$("#<%=txtDate.ClientID%>").datepicker({ dateFormat: 'DD, MM d, yy' });

showButtonPanel: By default it is false. But when set to true, it displays a button panel in datepicker which have two buttons "Today" and "Done". Done will hide the datepicker and display the selected date in textbox. Where "Today" will select the today's date in datepicker. It will not hide the datepicker.

$("#<%=txtDate.ClientID%>").datepicker({ showButtonPanel: true });

If you want to disable/enable datepicker control then

$("#<%=txtDate.ClientID %>").datepicker("disable");
$("#<%=txtDate.ClientID %>").datepicker("enable");

To see list of all the option please see here.

Feel free to contact me for any help related to jQuery. I will gladly help you.