Wednesday, March 28, 2012

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

No comments:

Post a Comment