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.

Restricting start date on Calendar extender.

How can I restrict the calendar so the user can not select a past date or dates prior to a specific date? And similarly for future date. Or do I need to validate it on

OnClientDateSelectionChanged

Thanks.

Yes, you would need to do some validation. One method you can use though is toremove the arrows that let the user cycle through the months based on a certain month/year combination.

RJS Calendar in GridView with Atlas

Hi all,

I am using Atlas in my web application. In edit template of grid view, I am using RJS Calendar (a third party). Every thing works normal while viewing the page without Atlas. When atlas is implemented on that page, calendar still works fine for Firefox but not for IE 7.0. It returns javascript error and calendar control wont open. As soon as Atlas is removed, it starts working again. For last two days, I am unable to resolve this problem. If any one have any idea/solution, please let me know.

Thanks in advance.
Best Regards.

I am having exactly the same problem. It works great in Firefox, but reports an error in IE, which says,

Char: 1
Error: 'document.getElementById(...)' is null or not an object.
Code: 0

I am using MagicAjax.

Any workaround for IE7.0?

rjs:PopCalendar CSS Problem

i use rjs calendar in my EditItemTemplate in Grid view without Atlas. This works fine but when i use atlas in my page then rjs Calender in EditItemTemplate CSS and image are not include.

If i use atlas in rjs calendar in my page rather than EditItemTemplate then it work fine. More ever if i use this rjs PopCalendar in EditItemTemplate and include this in another portion of the page rather then EditItemTemplate then rjs PopCalendar in EditItemTemplate also works fine.

I think if a page has only one rjs PopCalendar and we use this in EditItemTemplate of Grid View then CSS and image are not load.

Can any one help me.

Thanks in advance

The issue is that the client side script for components (like dhmtl popup calendars and in my case a custom textbox that formats its contents onblur) call Page.ClientScript.RegisterClientScriptBlock in their initialization. These controls are set up to only register the script once regardless of how many of the controls you have on the page. So when you drop one of these client-enabled controls on the page outside of the update panel the script will be registered as usual with no problems. If they are embedded in a template like the edit item template the control won't be created until postback and because you are doing a partial page update the call to Page.ClientScript.RegisterClientScriptBlock is failing to register the required scripting components. If you open the Error Console in firefox you'll see the javascript failing...

A quick fix is to drop an instance of the control you want to use outside the update panel and hide it...on page load the script will be registered and the control should function as usual. This is a hack and I'm currently searching (this forum and the web) for a better solution...I definitely don't want to include javascript via script tags in the markup...kinda defeats the purpose of encapsulating the script in the source for the control...

~JDS