jQuery UI Datepicker - Multiple Date Selections

Question

Hi

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

All help is appreciated! If its not posable 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: http://www.bewebmaster.com/280.php

<script type="text/javascript">
// Maintain array of dates
var dates = new Array();
function addDate(date) {if ($.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 = $.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;
}

$(function() {
$("#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 = insertZeroForDayOrMonth(date.getMonth() + 1);
                                var day = insertZeroForDayOrMonth(date.getDate());
           // This depends on the datepicker's date format
                                var dateString = month + "/" + day + "/" + year;

                                var gotDate = $.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, ""];
                        }
                    });     

Answer 3

I just created an extension for jQuery UI datepicker that allows multiple dates selection, hope it helps: http://dubrox.blogspot.com/2010/09/multiple-dates-picker-for-jquery-ui.html

Feedback is always welcome :)