I've used the JQuery UI DatePicker in the past and am pretty happy with it. I'm looking for a way to display to the user multiple dates into the future. I don't want the user to be able to choose the dates, I just want to make them fixed them at runtime.
Is there any easy way to make this possible?
You can do that with 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 example: http://jsfiddle.net/william/VzZYU/
for loops but it only adds the class of the 1st loop.I don't believe the functionality to do this is built into the datepicker. So, there doesn't appear to be an easy way to do what you're asking.
However, you could possibly achieve this by applying the ui-datepicker-current-day class to the multiple dates. You'll have to do this manually by finding the tags for the dates you want selected.
To prevent the user from selecting a date, you could use the "disable" datepicker method or the "disabled" option. However, that will dim the calendar. Another possible approach would be to handle the onSelect event and re-assign the css class to the multiple dates and remove it from the date the user selected.
