how to make days unselectable in DatePicker?

Question

I was wandering how to make only some days in a week enabled? For example how to make Monday Wednesday and Thursday enabled and the rest of the days disabled in a certain week in a certain month?

I have played around with setDate(DateOption dateOption), setMaxDate(DateOption dateOption), and setMinDate(DateOption dateOption) but with no result.

Thank you.

Answer 1

AFAIK you cannot do this with the default jQuery datepicker.

I recently came across this problem myself, I could not find a solution using the default jQuery datepicker, so instead I created my own wiQuery plugin using: http://keith-wood.name/datepick.html. It requires a little more work, but by digging into the wiQuery code, you can find the classes you need to emulate to get this alternate datepicker working.

I copied the:

• DatePickerOptions
• DatePicker
• DatePickerJavascriptResourceReference
• JsScopeUiDatePickerOnChange

.classes from org.odlabs.wiquery.ui.datepicker.

I appended 'Multi' to the beginning of these class-names and used the reference guide of settings and callback options at: http://keith-wood.name/datepickRef.html (can also see a neater but less concise version by clicking quick ref from the first link) to enable my newly created MultiDatePicker class to generate the correct javascript.

For example, by default in DatePicker there is the following code:

public JsStatement statement() {
    return new JsQuery(this).$().chain("datepicker",
            options.getOptions().getJavaScriptOptions());
}

Which is used to create the following javascript:

(function($) {
$(document).ready(function() {$('#startDate').datepicker({defaultDate: '+1', minDate: '+1', showOn: 'both', buttonImageOnly: true, buttonImage: '/Calendar.png'});
});
})(jQuery);

(where my chosen options are within the curly braces).

I changed this in my MultiDatePicker.java to:

public JsStatement statement()
{
    return new JsQuery(this).$().chain("datepick", options.getOptions().getJavaScriptOptions());
}

I placed the lines:

public void setMultiSelect(int i)
{
    put("multiSelect", i);
}

public int getMultiSelect()
{
    return getInt("multiSelect");
}

into my multiDatePickerOptions, and some dumb getters and setters in the MultiDatePicker class which set these options, and this allows you to set how many dates can be set. By doing all this I was then able to do:

MultiDatePicker multiDatePicker = new MultiDatePicker("datePicker");
multiDatePicker.setMultiSelect(2);
add(multiDatePicker);

Which generates the following javascript code:

$('#startDate').datepick({multiSelect: 999, showTrigger: '/Calendar.png', dateFormat: 'dd/mm/yyyy', onDate: function(date, current) { /*I used this callback function to only allow certain dates to be selected by the user.*/}});

Good luck!