Monday, November 24, 2008

How to disable the dates which are less than the current day?

AjaxControlToolkit Calendar is a very DatePicker for us. Sometimes, the customers hope some specific date in Calendar should be disabled or hidden so that we can not select these dates.

For example,
-- how to disable the dates which are less than the current date?
-- how to disable the dates other than sunday?

Actually, you can modify the original CalendarBehavior.js to achieve it.

1.Please go to CalendarBehavior.js in AjaxControlToolkit original project.
2.Please use the below code instead of section ‘case "days": ' in function _cell_onclick: case "day":

var _currentDay=new Date();
if(target.date.getDate()>=_currentDay.getDate())
{
this.set_selectedDate(target.date);
this._switchMonth(target.date);
this._blur.post(true);
this.raiseDateSelectionChanged();
}
break;

3.If you want to change the dates' style which are less than current day, you can use other css class on the related date cell when the calendar was created in _performLayout method.
The below code can be used to apply the different css calss on the related date cell in _performLayout method.
Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, 'name'));

4.And then please rebuild the project and add it as reference again.