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 :
1) Show week
2) Show button panel(Today, Done)
3) Show selection “change month”
4) Show selection “change year”
5) Change date format
6) Choose year range for selection
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.