jQuery UI Datepicker With ASP.NET
jQuery UI Datepicker is another great widget, extremely useful on forms, which can be easily integrated with ASP.NET. There are tones of different datepickers available almost everywhere so big question is why this one is better than other ones?
Here are a few reasons:
- jQuery UI is very well tested
- jQuery UI is based on jQuery framework and very well integrated
- there are 20+ themes available, ready to use, which you can take and make the datepicker to look consistent with your site
- even if available themes are no good for you, you can easily customize it
- it’s easy to integrate with ASP.NET
- it’s flexible, you can configure it to serve you in many scenarios
On top of that, it’s my subjective opinion, but I really can recommend this plugin. I think it should cover 95% of typical scenarios which you can encounter on websites.
Okey, so let’s get started …
How to integrate jQuery UI Datepicker with ASP.NET
Step 1 – download jQuery UI on your machine. I was using version 1.8.14.
Step 2 – Make sure that your page has all the required JS and CSS files included. Datapicker has a few dependencies. Here is everything you need:
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <link href="/Styles/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/ui/jquery.ui.core.js" type="text/javascript"></script> <script src="/Scripts/ui/jquery.ui.widget.js" type="text/javascript"></script> <script src="/Scripts/ui/jquery.ui.datepicker.js" type="text/javascript"></script>
Step 3 – HTML Code
This part is very simplified of course just to illustrate basic concepts.
<div id="DatepickerDiv" class="demo"> Event start date: <asp:TextBox ID="txtEventStartDate" runat="server" CssClass="DatepickerInput" /><br /> <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" /><br /> <asp:Literal ID="litMessage" runat="server" /> </div>
Basically minimalistic version contains textbox where user will enter a date. Datepicker widget will be attached to exactly this textbox. There is also button which will submit the form and literal to display messages from server.
Step 4 – jQuery Code
$(document).ready(function () {
$(".DatepickerInput").datepicker({ dateFormat: 'dd/mm/yy' });
});
As you can see this is not very complex. In fact specifying date format is optional but I don’t like to leave date formats not specified. I have too many bad experiences from working with multilingual sites. Date format is different even between UK and US so this is one thing which I don’t want to leave for jQuery to figure out.
In this example jQuery finds textbox based on CSS class – this part is responsible for it: $(“.DatepickerInput”). Here you can read more about how to use basic jQuery filters. Datepicker is attached by calling function datepicker(). All parameters are optional, even dateFormat which I used here.
After this step you should be able to get this effect after clicking on txtEventStartDate textbox:
Step 5 – ASP.NET Code
On server side the only missing thing is implementation of btnSave_Click() method:
protected void btnSave_Click(object sender, EventArgs e)
{
DateTime date;
if (DateTime.TryParseExact( txtEventStartDate.Text,
"dd/MM/yyyy", // example: 31/01/2011
CultureInfo.InvariantCulture,
DateTimeStyles.None,
out date))
{
litMessage.Text = "Parsed event start date: " + date.ToShortDateString();
}
else
{
litMessage.Text = "Error: we were unable to parse the start date: " + txtEventStartDate.Text;
}
}
The most important thing to remember is to use the same date format as it was in jQuery script. You can see that there are differences in Java Script and ASP.NET data format notation. This can be confusing and is something that should be well commented! It is also a good practice to use TryParseExact() method over simply ParseExact(). And the rest I think is self-explanatory 
Conclusion
jQuery UI Datepicker can be easily integrated with ASP.NET and I think should be considered as a default datepicker option for majority of websites. Example in this post shows that you need only a few lines on jQuery code to get everything working. Can you see any reason to not follow this approach?
Next steps? Two actually …
- You can also check how to integrate Autocomplete jQuery UI widget with ASP.NET
- And you can read more about configuration options which Datepicker offers.