Question

Is there a Javascript or some library that would create a datepicker for a webpage (similar to Jquery UI DatePicker that would only allow certain dates to be clickable and highlighted.

For example on server side, I could specify a array of days to enable to be selected.

Answer 1

The Datepicker beforeShowDay() event is intended for exactly this purpose. Here’s an example where the set of allowed dates is relatively small for purposes of illustration. Depending on how many dates you have and how they are chosen, you could instead write a method that programmatically selected dates (say by ignoring weekends, the 1st and 15th of every month, etc). Or you could combine both techniques, say remove weekends and a fixed list of holidays.

$(function() {
    // this could be a static hash, generated by the server, or loaded via ajax
    // if via ajax, make sure to put the remaining code in a callback instead.
    var dates_allowed = {
          '2009-12-01': 1,
          '2009-12-25': 1,
          '2010-09-28': 1,
          '2011-10-13': 1
    };

    $('#datepicker').datepicker({
        // these aren't necessary, but if you happen to know them, why not
        minDate: new Date(2009, 12-1, 1),
        maxDate: new Date(2010, 9-1, 28),

        // called for every date before it is displayed
        beforeShowDay: function(date) {

            // prepend values lower than 10 with 0
            function addZero(no) {
                if (no < 10){
                  return "0" + no;
                }  else {
                  return no; 
                }
            }

            var date_str = [
                addZero(date.getFullYear()),
                addZero(date.getMonth() + 1),
                addZero(date.getDate())      
            ].join('-');

            if (dates_allowed[date_str]) {
                return [true, 'good_date', 'This date is selectable'];
            } else {
                return [false, 'bad_date', 'This date is NOT selectable'];
            }
        }
    });
});

The return values are

[0]: boolean selectable or not,
[1]: CSS class names to apply if any (make sure to return '' if none),
[2]: Tooltip text (optional)

Note that the date variable given in the callback is an instance of a Date object representing the given day, not a text version of that date in the specified format. So for instance, you could generate the list of allowable dates in one format while displaying dates in the datepicker in a different format (e.g. so you wouldn’t have to transform dates from a DB when generating the page).

See also Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?