Integration of jQuery DatePicker in ASP.NET Website (part 1)
In the previous days, I’ve been working on few jQuery DatePicker plug-ins.
The one I will be using in this blog post is the Keith Wood’s DatePicker plug-in which has a lot of features that can be easily extended. The source code of the plug-in you have it here, including some demos and examples, but also in the end of this blog post, I have posted link to the complete project on which I’m integrating this plug-in with some changes I have done so far.
Firstly, I would like to note that this plug-in is fully compatible with jquery-1.4.2.min.js, so that we can easily reference the link from the Microsoft Ajax CDN
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
- Files in the Project
We have only one javascript jquery.datepick.js which is the plug-in itself.
Also, there are two CSS files:
- jquery.datepick.css - which comes together with the plug-in
- style.css - simple stylesheet that I have made to override some plug-in styles and formatting
And, one Default.aspx page where I'm doing the complete integration of this plug-in.
- Complete ASPX code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<link rel="Stylesheet" type="text/css" href="styles/jquery.datepick.css"></link>
<link rel="Stylesheet" type="text/css" href="styles/style.css"></link>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
$('#startdate').datepick({ dateFormat: 'dd/mm/yyyy' });
$('#enddate').datepick({ dateFormat: 'dd/mm/yyyy' });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="content">
From <asp:TextBox ID="startdate" class="field" runat="server"></asp:TextBox> -
To <asp:TextBox ID="enddate" class="field" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Shortly, I have referenced the scripts and styles. There are two text boxes with ids: startdate and enddate. Also, these text boxes contains class=”fields” which is one of the classes in the style.css file.
But nothing would work as expected if we don’t have the six lines of jQuery code which do all the magic in our integration:
<script type="text/javascript">
$(function() {
$('#startdate').datepick({ dateFormat: 'dd/mm/yyyy' });
$('#enddate').datepick({ dateFormat: 'dd/mm/yyyy' });
});
</script>
The result is
I have changed the default date format which is ‘mm/dd/yyyy’ to ‘dd/mm/yyyy’ just to test the way of how to manipulate the plug-in settings.
Here you can find the complete list of settings that this plugin supports: http://keith-wood.name/datepickRef.html
You can also easily modify the plug-in to localize in your local language, it has regional settings, part of the code:
this.regional = {
'': { // US/English
monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
dayNamesMin: ['Su', 'Mo', 'Tue', 'We', 'Thu', 'Fr', 'Sa'],
Note: In one of the following blogs, I will cover an example on how to make complete localization of this plug-in in your own language, even though it’s already translated in most of the languages right now.
Few of the settings I have tested so far:
1. Animation of the calendar: the default animation the plug-in uses is ‘show’ – you can override it with any animation supported in jQuery
Example:
$('#startdate').datepick({ dateFormat: 'mm/dd/yyyy', showAnim:'fadeIn' });
2. Show speed of the calendar: the default is set to ‘normal’ – you can override it to fast or slow
Example:
$('#startdate').datepick({ dateFormat: 'mm/dd/yyyy', showSpeed: 'fast' });
3. minDate and maxDate: you can easily specify what should be the minimum and maximum date a user can select
$('#startdate').datepick({ minDate:'07/01/2010', maxDate:'07/15/2010' });
You see, the half of the month days are grayed because I have set the maxDate to 15 July 2010. Also, when clicking the Months dropdownlist, in this case there would be no month because I've set minDate to 1 July 2010.
So, this is the main way to integrate this interesting jQuery plug-in into an ASP.NET WebForms Website. The way does not differs much in MVC because we do almost everything in jQuery.
In the next blog, I will post some more examples where I will use some validation scripts I’ve written and do some post backs.
Hope this was interesting for reading.
Here is the complete source code so far. The next time I will post the source code with the modifications I will do.
Please write your comments and suggestions :).
Thank You,
Hajan