IMPORTANT NOTE: I'm not having much time in these days to finish documenting, but I've released a demo for you: http://multidatespickr.sourceforge.net/
All the documentation will be moved, little by little, to the sourceforge page.
Please consider that I've already done important bug fixes but had no chance to upload anything to sourceforge as my job's IP is banned :s
I'll upload the new version this weekend, so check it out :)
I love jQuery UI because it allows me to quickly create administration interfaces without the hassle of writing code for animations and common widgets.
By the way there are times when I find myself in need for a feature that jQuery UI's widgets don't cover, like -for example- the ability to pick multiple dates using the jQuery UI DatePicker calendar widget.
This time I really needed this functionality and thought that it would be easier to learn how to write a jQuery plug-in to extend DatePicker, instead of adopting another javascript tool.
The result is this multiDatesPicker I made. I spent one day to do it, trying to understand how to develop the plugin using best practices and trying to make it work.
It seems stable now, makes just what I needed it to, and mantains all the datepicker events, methods and options, exception made for the "beforeShowDay" event that had to be sacrified in the name of multiple selections (I still hope I can find a way to make it available, but I have to investigate more).
To download it just click here: jquery.ui.multidatespicker.js
How to use it?
Being an extension to jQuery UI DatePicker you need to include both jQuery and jQuery UI (with datepicker module included!) javascript files to your HTML page, and right after that, include MultiDatesPicker.
To apply it to an element, do it the same way as you would do with jQuery UI datepicker, but write multiDatesPicker instead of datepicker:
$(element-or-selector).multiDatesPicker(options-to-initialize-datepicker-and-multidatepicker);
MultiDatesPicker specific options:
- addDates
Adds an array of dates specified in a string or javascript date object format.
NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it.
Available methods:
- compareDates( date1, date2 )
Compares two dates returning 1, 0 or -1 if date2 is greater, equal or smaller than date1 respectively. - gotDate( date )
Returns the index of the date in the dates array, or false in case that date is not found. - addDates( dates )
Adds one or more dates to the calendar.
The parameter dates can be a string or an array (of strings or javascript date objects). - removeDates( indexes )
Removes one or more dates from the dates array using their indexes.
The parameter indexes can be an integer or an array of integers. - toggleDate( date )
Adds/removes a single date from the calendar. - getDates( format )
Retrives the array of dates associated with the multiDatesPicker in the specified format: "string" (default) for localized string format, or "object" for javascript date object format.
Please comment if you think this plugin is useful for you, or if you have ideas on how to make it better.
