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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s