jQuery UI Datepicker - Multiple Date Selections

Question

Is there a way to use the jQuery UI Datepicker widget to select multiple dates?

All help is appreciated! If its not possible to use the jquery UI datepicker then is there something similar that does?

Answer 1

I needed to do the same thing, so have written some JavaScript to enable this, using the onSelect and beforeShowDay events. It maintains its own array of selected dates, so unfortunately doesn't integrate with a textbox showing the current date, etc. I'm just using it as an inline control, and I can then query the array for the currently selected dates.
I used this code as a basis.

<script type="text/javascript"> // Maintain array of dates var dates = new Array();  function addDate(date) {     if (jQuery.inArray(date, dates) < 0)          dates.push(date); }  function removeDate(index) {     dates.splice(index, 1); }  // Adds a date if we don't have it yet, else remove it function addOrRemoveDate(date) {     var index = jQuery.inArray(date, dates);     if (index >= 0)          removeDate(index);     else          addDate(date); }  // Takes a 1-digit number and inserts a zero before it function padNumber(number) {     var ret = new String(number);     if (ret.length == 1)          ret = "0" + ret;     return ret; }  jQuery(function () {     jQuery("#datepicker").datepicker({         onSelect: function (dateText, inst) {             addOrRemoveDate(dateText);         },         beforeShowDay: function (date) {             var year = date.getFullYear();             // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"             var month = padNumber(date.getMonth() + 1);             var day = padNumber(date.getDate());             // This depends on the datepicker's date format             var dateString = month + "/" + day + "/" + year;              var gotDate = jQuery.inArray(dateString, dates);             if (gotDate >= 0) {                 // Enable date so it can be deselected. Set style to be highlighted                 return [true, "ui-state-highlight"];             }             // Dates not in the array are left enabled, but with no extra style             return [true, ""];         }     }); }); </script> 

Answer 2

When you modifiy it a little, it works regardless which dateFormat you have set.

$("#datepicker").datepicker({                         dateFormat: "@", // Unix timestamp                         onSelect: function(dateText, inst){                             addOrRemoveDate(dateText);                         },                         beforeShowDay: function(date){                             var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);                             if (gotDate >= 0) {                                 return [false,"ui-state-highlight", "Event Name"];                             }                             return [true, ""];                         }                     });