Restricting Dates in an AJAX Calendar

I need to build some logic into my ajax calendar control to prevent the user from entering a date that is less than today's date. I have two text boxes with one called SDate and another called FDate. Each of these text boxes have AJAX calendar extenders attached. So i am trying to figure out when the user clicks the text box, they can only select a date from the AJAX calendar that occurs from today's date onwards. The previous dates should be unselectable.

I thought the follwing code would work, but it seems it does not, as the AJAX calendar control doesn't seem to have the DayRender feature of the full .NET calendar.

ProtectedSub CEStartDate_DayRender(ByVal senderAsObject,ByVal eAs DayRenderEventArgs)

If e.Day.[Date] < Today()Then

e.Day.IsSelectable =False

Else

e.Day.IsSelectable =True

EndIf

EndSub

Any thoughts??

Hi Lochview,

Yes , we can keep the select date in within boundies when we use Calendar but not CalendarExtender(Ajax control). Based on the research of its source code, we can find that CalendarExtender generated all on the client using Javascript and we can control less on the server side. So unfortunately, we cannot achieve what you want by using any direct properties or functions unless we modify its source code. Below is the code snippet which is used to generate its days.

_buildDays : function() {
/// <summary>
/// Builds a "days of the month" view for the calendar
/// </summary>

var dtf = Sys.CultureInfo.CurrentCulture.dateTimeFormat;

this._days = $common.createElementFromTemplate({
nodeName : "div",
cssClasses : [ "ajax__calendar_days" ]
}, this._body);
this._modes["days"] = this._days;

this._daysTable = $common.createElementFromTemplate({
nodeName : "table",
properties : {
cellPadding : 0,
cellSpacing : 0,
border : 0,
style : { margin : "auto" }
}
}, this._days);

this._daysTableHeader = $common.createElementFromTemplate({ nodeName : "thead" }, this._daysTable);
this._daysTableHeaderRow = $common.createElementFromTemplate({ nodeName : "tr" }, this._daysTableHeader);
this._daysBody = $common.createElementFromTemplate({ nodeName: "tbody" }, this._daysTable);

for (var i = 0; i < 7; i++) {
var dayCell = $common.createElementFromTemplate({ nodeName : "td" }, this._daysTableHeaderRow);
var dayDiv = $common.createElementFromTemplate({
nodeName : "div",
cssClasses : [ "ajax__calendar_dayname" ]
}, dayCell);
}

for (var i = 0; i < 6; i++) {
var daysRow = $common.createElementFromTemplate({ nodeName : "tr" }, this._daysBody);
for(var j = 0; j < 7; j++) {
var dayCell = $common.createElementFromTemplate({ nodeName : "td" }, daysRow);
var dayDiv = $common.createElementFromTemplate({
nodeName : "div",
properties : {
mode : "day",
innerHTML : " "
},
events : this._cell$delegates,
cssClasses : [ "ajax__calendar_day" ]
}, dayCell);
}
}
}

I hope this help.

Best regards,

Jonathan.