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.

10 comments:

Mark said...

Where is the related date cell in _performLayout method?

Trying to change the css.

Mark 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..

@|\/|O|_ said...

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

Alana Shaikh said...

It is recommended to join and visit the disabled dating sites UK because they offer best applications. Now plenty of options and categories are available for disabled people online. You can easily get access to such features and applications. Most of the dating sites are free of cost. They offer free dating services for the benefit of people. In order to find a good dating partner, you should use only accurate information. The use of wrong information like age, location, gender and education can lead to some problems later. It is reported that most of disabled people always use accurate information in dating rooms.

Leslie Lim said...

First time I commented in a blog! I really enjoy it. You have an awesome post. Please do more articles like this. I'm gonna come back surely. God bless.

Rica
www.imarksweb.org

sarah lee said...

I really enjoyed reading your article. I found this as an informative and interesting post, so i think it is very useful and knowledgeable. I would like to thank you for the effort you have made in writing this article.


edupdf.org