It is important to know that all JQuery plugins are tested for compatibility and currently have been tested in: IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, and Google Chrome. You should always test for your target audience. That being said, I have never had the problem of a plugin or function not working properly in modern browsers.

One of my favorite plugins is the Datepicker. It is very simple to implement, yet very, very customizable. I have used this plugin in different projects. They look and act so different that if you were to visit each site (to the untrained eye) you could not tell they are the same code base.

Another very useful plugin that I use a lot is the Validate plugin. Again, we have an easy implementation. Use a selector and select your form. Let’s say we have a form with the ID of  “myForm” and we want to ensure that the fields are validated. Just add the following line and that’s it:

$("#myForm").validate(); - Simple, uh?

“A single line of jQuery to select the form and apply the validation plugin. And a bit of metadata on each element to specify the validation rules. Of course that isn’t the only way to specify rules. You also don’t have to rely on those default messages, but they come in handy when starting to setup validation for a form.” – Validator Documentation

There are a ton more plugins out there. These are just the ones I use most on my projects.

These, and a lot more of them, can be seen on their demo and documentation.

You may view and download the presentation here.

//Add the date picker functionality. The selector is
// class based so it works for every form screen.
var now = new Date();
var thisYear = now.getYear();
var browser=navigator.appName;

if (browser==”Microsoft Internet Explorer”){
var startYear = thisYear – 70;
var endYear = thisYear + 20;
}
else {
var startYear = thisYear – 70 + 1900;
var endYear = thisYear + 20 + 1900;
}
$(“.datePickerControler”).datepicker({
changeFirstDay: false,
yearRange: + startYear +’:'+ endYear,
defaultDate: new Date(now)
});

The previous code snippet calculates, based on the current year, 20 years in the future and 70 years in the past. I then pass those values to the date picker to set a year range. You can also set this range by hard-coding it but, who wants to have to go back to their code every year and update the range?

For those unfamiliar with Javascript and/or JQuery I will break down that snippet.

//The Date object is used to work with dates and times. The following code creates a Date object and saves it in a variable called “now”:
var now = new Date();
//The getYear() method returns the year, as a two-digit OR a three/four-digit number. Set the “thisYear” variable to contain the value of the current year.
var thisYear = now.getYear();

//Retrieve the user’s browser info (I will explain why in a second). Save that to a variable called “browser”.
var browser=navigator.appName;

//Now we calculate, based on the current year, 20 years in the future and 70 in the past. Believe it or not, Internet Explorer actually does a spiffy job of interpreting the correct year. In any other browser we need to perform the calculation and then add 1900 in order to get the proper year value. This is why we need to know which browser the user is using. We do a basic if/else statement where we check for the value in the variable “browser”.

if (browser==”Microsoft Internet Explorer”){
var startYear = thisYear – 70;
var endYear = thisYear + 20;
}
else {
var startYear = thisYear – 70 + 1900;
var endYear = thisYear + 20 + 1900;
}

//Now we get into the plugin call itself. We used a class selector for our datePickers so we could reuse them throughout our site.  We take the “startYear” and “endYear” variables and use them to set the “yearRange” property values. We also set the “defaultDate” property to default to the current date.

$(“.datePickerControler”).datepicker({
yearRange: + startYear +’:'+ endYear,
defaultDate: new Date(now)
});

That’s it! We have a datePicker that we set and forget. It will automatically update its date range.

Note:  I used Jquery’s UI library version 1.5.3. The new version has more built in options which might render this method of calculation obsolete.