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.

7 comments:

Unknown said...

Where is the related date cell in _performLayout method?

Trying to change the css.

Unknown said...

What would be incredibly useful is if you could stylize dates based off the asp:RangeValidator MinimumValue and MaximumValue. So if a date does not fall within that range it's gray or something... Got anything like that?

beaugirl said...

Thanks for this! I successfully disabled the appropriate dates, however, in trying to add the css class, I added the below to _performLayout, right after this line:

Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, 'd'));


I created properties (and confirmed they work) which fill the values for _firstValid and _lastValid. My "if statement" seems to work, as I added an alert with "currentDate" to verify it was getting into it for the correct dates. I added the class "invalid-date" to my css file, but the properties don't seem to get applied to the disabled dates. Any suggestions?


if ((null != _firstValid && currentDate < _firstValid) || (null != _lastValid && currentDate > _lastValid)) {
Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, 'invalid-date'));
}

Shalini said...

I'm using AjaxControlToolkitBinary
I cant see any files with .js extention

Any suggestions?

bipi said...

Hey can you please show the code to disable future dates in calender extender from script??

bipin said...

Hiii Vince Xu...

Please help me on this problem..

I have to disable cell click and remove the hover effect of the dates which are greater than current date in Ajax calender extender...

Please reply as soon as possible..

Amol Chakane said...

That’s fine but where will I get the AJaxControltoolkit source file and calenderBehaviour.js