JQuery UI Datepicker as displaying multiple dates

Question

I have used jQuery UI DatePicker in the past and am very happy with it. I am looking for a way to display the user several dates in the future. I don’t want the user to be able to select dates, I just want them to fix them at runtime.

Is there an easy way to make this possible?

Answer 1

You can do this using the beforeShowDay event.

 // list of dates to highlight var dates = [ [2011, 8, 1], [2011, 8, 9], [2011, 8, 25] ]; $('#datepicker').datepicker({ beforeShowDay: function (date){ var year = date.getFullYear(), month = date.getMonth(), day = date.getDate(); // see if the current date should be highlighted for (var i=0; i < dates.length; ++i) if (year == dates[i][0] && month == dates[i][1] - 1 && day == dates[i][2]) return [false, 'ui-state-highlight ui-state-active']; return [false]; } }); 

See an example: http://jsfiddle.net/william/VzZYU/

Answer 2

I do not believe that the functionality for this is built into the datepicker. So there seems to be no easy way to do what you ask.

However, you could achieve this by applying the ui-datepicker-current-day class to multiple dates. You will need to do this manually by finding tags for the dates you selected.

To prevent the user from selecting a date, you can use the "disable" datepicker or "disabled" method. However, this will reduce the calendar. Another possible approach would be to handle the onSelect event and reassign the css class to multiple dates and remove it from the date the user is selected.