JQuery How to use DatePicker

A JQuery DatePicker can easily be added as a popup to a input text field.The popup shows when the textbox is focused and is closed by clicking on the “Done” button or clicking anywhere else on the page.Really, it helps us to input day,month,year very effectively and quickly…

By default, the popup showns as following :

JQuery DatePicker standard

How to use DatePicker

++ Desgin HTML with a input text box field :

<form id="form1" runat="server">
<div>
    Input date : <asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
</div>
</form>

++ Add JQuery library by including *.js and css to head of HTML :
Download JQuery library plugin here

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<link href="Css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

++ Add Javascript code to process textbox field to show DateTimePicker :

<script language="javascript" type="text/javascript">
$(function() {
   //$("#txtCalendar").datepicker(); // by default
   $("#txtCalendar").datepicker({ showWeek: true, showButtonPanel: true, 
       changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', yearRange: '2010:2015' });
});
</script>

++ Run program, when focus on textbox, datepicker is shown as below image which I give some notes for the features mentioned above.

JQuery DatePicker after configuration

Source Code Demo page