achu achu - 6 months ago 35
Javascript Question

disable next 10 days in jQuery ui datepicker

$('#date').datepicker({
maxDate: "+30d",
minDate:0
});


i want to disable the next 10 date from the current date, I am trying to do with this code but not working

Answer

Just use minDate:

$('#date').datepicker({
    maxDate: "+30d",
    minDate: "+10d"
});

RESULT

enter image description here

WORKING DEMO


NOTE: this will make selectable 20 days, if you want to allow 30 days selection starting 10 days from today you will need to set attribute maxDate: "+40d":

$('#date').datepicker({
    maxDate: "+40d",
    minDate: "+10d"
});

ADD ON:

thank Jordi, if it possible to enable the current date only??

@achu you mean, enable today AND disable next 9 days?

yes your right, today date should be enable.

This can be done via jquery or javascript simply removing the classes that does not allow you to select the day.

// select today's object, and remove classes ui-datepicker-unselectable ui-state-disabled
$(".ui-datepicker-today").removeClass("ui-datepicker-unselectable ui-state-disabled");

DISCLAIMER: Be careful, removing the classes should be done when datepicker is created, in this WORKING DEMO is you can see I use onClick, look at THIS NON WORKING DEMO, where same code non wrapped into a function, is executed in onReady when datepicker still does not exists.

RESULT (css also added ;)

enter image description here

Comments