CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Jonathan
Jonathan

Reputation: 3534

JQuery UI Datepicker as multiple date display

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?

Upvotes: 4

Views: 4812

Answers (2)

William Niu
William Niu

Reputation: 15853

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/

Upvotes: 12

ShellyFM
ShellyFM

Reputation: 561

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.

Upvotes: 0

Related Questions