Changing focus when date selected in CalendarExtender control

This may fall more within the realm of general ASP.NET web development, but since it's regarding an AJAX Control Toolkit control, I thought it'd be best posted here.

I'm finding a "feature" of the calendar extender behavior to be be quite annoying. It seems that by default when a date is selected on the calendar and the selected date displays in the associated textbox, the calendar itself stays displayed and the only way I've found to get rid of it is to click anywhere outside the calendar itself. You can't tab out of it to the next textbox, Enter won't get rid of it, etc.

I'm sure there's a way to have the calendar collapse when the date is changed, but I just don't know how - could someone provide a way to do this?

Here's the code for my calendarextender:

<asp:TemplateField HeaderText="Date"><ItemTemplate><asp:Label ID="lblWeatherDate" runat="server" Text='<%# Bind("WeatherDate", "{0:dd-mm-yyyy}")%>' /></ItemTemplate><EditItemTemplate><%-- OnTextChanged="txtWeatherDate_OnTextChanged" --%><asp:TextBox ID="txtWeatherDate" Text='<%# Bind("WeatherDate")%>' runat="server"TabIndex="0" Width="80px" Font-Size="10px" /><ajaxToolkit:MaskedEditExtender ID="editExtWeatherDate" runat="server" TargetControlID="txtWeatherDate" Mask="99/99/9999" MaskType="Date" MessageValidatorTip="True" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" ErrorTooltipEnabled="True" /><ajaxToolkit:MaskedEditValidator ID="editValidatorWeatherDate" runat="server" ControlExtender="editExtWeatherDate" ControlToValidate="txtWeatherDate" IsValidEmpty="True" InvalidValueMessage="Invalid entry. Select a date from the calendar or enter the format "mm\dd\yyyy"" Display="Dynamic" InvalidValueBlurredMessage="Error" /><ajaxToolkit:CalendarExtender ID="calExtWeatherDate" runat="server" Enabled="True" TargetControlID="txtWeatherDate" Format="MM/dd/yyyy" /></EditItemTemplate></asp:TemplateField>

As you can see I tried messing with the OnTextChanged of the textbox and started up with this code:

Sub txtWeatherDate_TextChanged(ByVal senderAs Object,ByVal eAs EventArgs)Handles txtWeatherDate.TextChangedDim txtWeatherDateAs TextBox =Me.gvWeather.FindControl("txtWeatherDate")txtWeatherDate.End Sub

But I couldn't figure out where to go with that. I was looking for something to do with changing the focus of the textbox, but couldn't figure that out.

Any help would be greatly appreciated.

Thanks!

this is in c# but this is how i get the calendar extender to close on date click

to close the calendar onClick i set this up in the code behind

//Hide the calendarprotected override void OnLoad(EventArgs e) { Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"hideCalendar", @."function hideCalendar(cb) { cb.hide(); }",true);base.OnLoad(e); }

and this is what the asp code looks like

 <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" OnClientDateSelectionChanged='hideCalendar'>

Hey, keyboardcowboy

Thanks for the code. It was pretty much a copy-paste thing. The C# converted nicely in a code converter. After selecting the date, the calendar disappears, as it should.

However, the oddest thing is happening now: The date displays in the date label as "dd-00-yyyy". I.e. the proper date number,two zeros for the month, then the proper year. This is regardless of what formatting I use for either the extender or the textbox (I was usingFormat="MM/dd/yyyy" in the extender). The date in the sql table it's coming from is correct and the date can be changed and saved (this is in a gridview) properly and it is even displayed properly when the textbox is showing while the gridview is in edit mode. It's just messed up in the label.

I was using the following for the bound text value for the date label:Text='<%# Bind("WeatherDate", "{0:dd-mm-yyyy}")%>'.When I remove the formatting string the date displays properly, but with the time as well. I can't get the date formatted to mm-dd-yyyy now!

Any thoughts?

Thanks

Okay, I caught one thing I was doing wrong: I was using two different formats: dd-mm-yyyy in the label and mm-dd-yyyy in the textbox.

But unfortunately, getting those two to the same format didn't fix the display problem. It's still displaying the month as two zeros (00). And that's regardless of whether I set the format as dd-mm-yyyy or mm-dd-yyyy.

Weird...

weird. maybe if that format string you are trying doesnt work you can try this .ToShortDateString(); that will display a date but without the time. it works in c# in sure it does in vb also so try this (not sure if it will work because i think casting types is different in vb)

Text='<% # ((DateTime)Bind("WeatherDate")).ToShortDateString()%>'

Yeah - I tried just putting it in my label, but got a build error, saying "DateTime" is a type and cannot be used as an expression. I don't know quite enough to know how to change it to work for my VB code.

Okay - found out CDate is used for casting dates. But I can't find quite the right syntax. I've tried: Text='<%# Bind(CDate("WeatherDate")).ToShortDateString() %>' , and Text='<%# CDate(Bind("WeatherDate")).ToShortDateString() %>' and even Text='<%# Bind((CDate("WeatherDate")).ToShortDateString()) %>' so far, but got build errors saying the Bind was not well formed.

Anyone know what the correct syntax would be in this case?

Thanks

I would make a new topic for the problem with your date and give it a title about the date. Some people will know how to do this in vb but will not check this post because it is about calendar stuff :P

Good idea. Will do. Thanks for your help - you got me further than I was an hour ago!

Regards

Change default view of CalendarExtender

I need to change the default calendar view from Days to Years when it initially pops up. Does anybody know how to do this?

Hi Arjang,

me@.arjang.ca:

I need to change the default calendar view from Days to Years

Would you please give us more clear explanations?Do you want to list all the Days of a year on the page? If yes , I think you'd better use javascript + HTML to write your own calendar.As far as I know, the CalendarExtender is designed for showing the Days of a month. For more details, please visit: http://www.asp.net/AJAX/Control-Toolkit/Live/Calendar/Calendar.aspx or the Ajax ControlToolkit's source code.Thanks.

Best regards,

Jonathan

Hi Jonathan

I wanted to have the ability to change the default calendar view from Days to Years when it initially pops up. One real world scenario when this would be very important would be when using the calendar to select a birthdate. The year could be 1950 so it's not practical for someone to scroll back month by month, and users don't always understand they have to click the title twice to switch to year. Exposing a property like "InitialView" that could be set at design time or runtime would be ideal. The calendar would pop up right to year selection, then month, then day.

Anyway, I fixed it by changing the Ajax source code and it seems it is working properly.

Thanks,

Arjang

I would be very interested in doing this as well, what did you change?(in CalendarBehavior.js?)

Also, I would like to fire the date selected event when the user selects a month rather than a day.

Any help would be appreciated.

I did the following changes:

1. added another parameter for default mode:

this._defaultMode ="days";

this._mode =this._defaultMode;

2. expose a property to handle default mode:

get_defaultMode :function() {returnthis._defaultMode;},

set_defaultMode :function(value) {

if (this._defaultMode != value) {

this._defaultMode = value;

this._mode =this._defaultMode;this.raisePropertyChanged("defaultMode");

}

},

3. in hide function change "days" tothis._defaultMode

this._switchMode(this._defaultMode,true);

4. finally, in_switchMonth function add the following code in the else section of "if (this._animated && !dontAnimate)".

if (this._mode !="days")

{

var element =this._modes[this._mode];

$common.setLocation(element, {x:0,y:0});

$common.setVisible(element,true);

}

Hope it helps! please let me know if you face any problem.

Worked like a charm. Thanks so much.