JQuery Date Picker With Month and Year Selection

Greetings !!!

I am going to share the Date picker control to use in ASP.Net web forms and in SharePoint custom solutions.

Add the below reference and script in head section of your web page.

<link type=”text/css” rel=”Stylesheet” href=”http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css ”  />
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js

$(function () {
$(“.txtDate”).datepicker({
dateFormat: “dd/mm/yyyy”,
minDate: “01/01/1900”,
maxDate: “31/12/2099”,
changeYear: true,
changeMonth: true,
yearRange: “1900:2099″
});
});

 

.txtDate is referring to asp control as shown below. You can also use control ID with # tag

<asp:TextBox ID=”txtDate” ClientIDMode=”Static” CssClass=”txtDate” runat=”server”></asp:TextBox>

ClientIDMode=”Static” helps in SharePoint to get the proper id as per the source page, to overcome the SharePoint auto generated id.

OutPut:

The control looks like below.

date

Advertisements