The first plugin in the series is a date picker created by Eyecon. It requires very little to implement and gives you quite a bit of power.
You can choose either a single date or a range of dates by simply clicking on the start date and then clicking on the end date. This functionality is similar to how the calendar works in Google Analytics.
In order to insert the date all you have to do is create a div.
<div id="date1"></div>
From there all you have to do is run the appropiate jQuery function and the calendar is placed within the div.
$(‘#date1′).DatePicker({
flat: true,
date: ['2008-07-28','2008-07-31'],
current: ’2008-07-31′,
calendars: 3,
mode: ‘range’,
starts: 1,
onChange: function(date) {
dates = date.toString().split(‘,’);
for( var d in dates ) {
alert(dates[d]);
}
}
});
There are a number of options available that modify the way the calendar looks and behaves. You will notice that I have programmed the calendar to place the selected dates in an alert box. In a traditional implementation you would change the value in a text box or multiple text boxes.
You can take a look at the example I have prepared here.
You can see a list of all the options available for use with the date picker from: http://www.eyecon.ro/datepicker/#implement and you can download the entire library from their website at: http://www.eyecon.ro/datepicker/
How can i set custom color styles to days? I plan to use this datepicker but I need to 1) have different colored days and 2) need to be able to update via AJAX.
I have not ever tried doing that particular thing with a date picker. However let me see if I can help point you in the right direction.
If you use Firebug (and if you are not, I suggest you download it — getfirebug.com) inspect the different days.
You will see that each day is enclosed in a td tag. Items that are selected have a class of “datepickerSelected”. I would use that as your guide to mark your days.
Here is where it can get a little tricky. In order to be able to update the days via Ajax, you have to find a way to find the day via a jQuery selector. For that the only thing I can think of is to modify the script to assign a unique ID to each day on the calendar. For example, the td for the day March, 2, 2010 could have the id of “3_2_2010″. With that you could manipulate the classes using standard jQuery selectors.
Hopefully this helps you out. If you have more questions feel free to post them.