TimePicker Options in UI for ASP.NET AJAX Calendar

License Developer

3 posts

Member since:
Feb 2007

Posted 12 Jun 2009 Link to this post

Howdy,

I am evaluating using the TimePicker control and was wondering if there is anyway to add "paging" or some mechanism to reduce the size of the "flyout". I need to display times from 12:00 AM to 11:45 PM in 15 minute intervals. But that makes the fly out extremely large and awkward. We currently just have an Hour drop down with 1 - 12, a Minute drop down with 00:00, 00:15, 00:30, 00:45, and then a AM, PM drow down. As far as I can tell you don't have a control that mimics this type of functionality. Am I wrong?

Thanks

dbl

Veli

Admin

2002 posts

Posted 15 Jun 2009 Link to this post

Hello David,

RadTimePicker does not provide paging for its TimeView, as it was not intended to accommodate a large number of values. You can reduce the font size of the TimeView to fit the same items in less space. Other than that, the approach you have taken seems to be the most feasible for displaying a large number of time intervals.

All the best,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Augusto Cosatti

32 posts

Member since:
Jul 2009

Posted 05 Aug 2009 Link to this post

Hello.

I'm trying to decrease the font size of the time items displayed in a TimeView but it doesn't have any effect. Changing the time picker header works fine, but not the content of the time items.

Could you please tell me what I'm doing wrong ?

Thanks
Regards
Augusto

Here is the control declaration:

<telerik:RadDateTimePicker ID="radDateTimePicker" runat="server" >
<TimeView Font-Size="X-Small" Font-Names="Verdana" HeaderText="Select time"
TimeStyle-Font-Names="Verdana" TimeStyle-Font-Size="XX-Small">
</TimeView>
</telerik:RadDateTimePicker>

Martin

Admin

833 posts

Posted 07 Aug 2009 Link to this post

Hello Augusto,

Thank you for getting back to us.

Actually the code you provide works as expected - just change Font-Size="X-Large" and you will note the difference.

If we can help further please let us know.

Best regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Nouman

5 posts

Member since:
Apr 2008

Posted 11 Aug 2009 Link to this post

Hello ,

I am using RadTimePicker. I want to add some of the validations on it.

e.g. when i type only 2:00 in TimePicker. By default it change the time to 2:00 AM. but i want that BY Default it change to 2:00 PM not into AM.

and second question. i want to get the typed text from RadTimePicker. i want to get whatever i typed, right or wrong. e.g. if i type 2:00 , it want to get 2:00 in message box .

Please help me out from this issue.

I will really thakful to you.

Nouman Rafique.

Nouman

5 posts

Member since:
Apr 2008

Posted 11 Aug 2009 Link to this post

Hello ,

I am using RadTimePicker. I want to add some of the validations on it.

e.g. when i type only 2:00 in TimePicker. By default it change the time to 2:00 AM. but i want that BY Default it change to 2:00 PM not into AM.

and second question. i want to get the typed text from RadTimePicker. i want to get whatever i typed, right or wrong. e.g. if i type 2:00 , it want to get 2:00 in message box .

Please help me out from this issue.

I will really thakful to you.

Nouman Rafique.

Martin

Admin

833 posts

Posted 13 Aug 2009 Link to this post

Hello Nouman ,

I would offer you to type 14:00 in the RadTimePicker (and the culture is set to 'en-US' for example) to get 2:00 PM.
However if you want to set the 2:00 entry as 2:00 PM then you can achieve this with a client side Javascript code. One possible approach would be to implement your logic on the client using the Picker.DateSelected event handler.

As to your second question you can get the entered value on the client using two events together. First to get a valid entry you can use the RadTimePicker.DateSelected. In case the entry is invalid you can use the RadDatePicker.DateInput.Error event. So a sample code could look like this:

    
            <script type="text/javascript"> 
        
                        function DateSelected(sender, args) 
        
                        { 
        
                            var text = args.get_newValue(); 
        
                        } 
        
                        function error(sender, args) 
        
                        { 
        
                            var text = args.get_inputText(); 
        
                        } 
        
                    </script> 
        
                    <telerik:RadTimePicker runat="server" Culture="en-US" ID="RadTimePicker1"> 
        
                        <ClientEvents OnDateSelected="DateSelected" /> 
        
                        <DateInput> 
        
                            <ClientEvents OnError="error" /> 
        
                        </DateInput> 
        
                    </telerik:RadTimePicker>

I hope this helps.

Best Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Augusto Cosatti

32 posts

Member since:
Jul 2009

Posted 28 Aug 2009 Link to this post

Martin,

Thanks for you reply. I have tried to put X-Large but it doesn't change the font.

What I'm getting in the time popup window is something like

Select time
12:00     1:00       2:00
     AM       AM         AM

What I want is to have the PM/AM next to the hour:minute.

Select time
12:00AM     1:00AM       2:00AM

I was not able to attach a screenshot of what is displayed.

Could you please tell me what I should change in the definition of the TimeView.

Thanks
Regards
Augusto

Martin

Admin

833 posts

Posted 28 Aug 2009 Link to this post

Hello Augusto,

I prepared a short video demonstrating the usage of Font-Size property of the TimeView control.
However if you intend to change the size of the popup window then you can just set the Width and Height properties of the TimeView control.

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

fontsize.zip

Augusto Cosatti

32 posts

Member since:
Jul 2009

Posted 31 Aug 2009 Link to this post

Martin,

Thanks for the video.
I have found out why it does not work. Its because I didn't put the

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

directive in the page.

I have defined the TimePicker in a user control (ascx) and the user control is used in a child page that is nested in a master page.
I can't include the <!DOCTYPE... directive in the master page because other components that I'm using are not displayed correctly.

The <!DOCTYPE can't be used in a aspx child page. When I put the directive in the user control (ascx) it does not have any effect.

Do have a workaround to this issue ?

Many thanks for you help.
Regards
Augusto

Martin

Admin

833 posts

Posted 02 Sep 2009 Link to this post

Hello Augusto,

You don't need the "DOCTYPE" directive in your content page or in your user control declarations.
I changed the sample project and now it mimics your scenario with a master page,content page and a web user control.

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

fontsize1.zip

Augusto Cosatti

32 posts

Member since:
Jul 2009

Posted 07 Sep 2009 Link to this post

Martin,

Thanks for your new example.

Actually the problem appears when you put the "Vista" skin for the RadDateTimePicker control and the font-size "X-Small" for the TimeView.

Skin=Vista + Font-Size=X-Small --> PM/AM are displayed on a new line
Skin=Vista + Font-Size=XX-Small --> PM/AM are displayed correctly

May be we this effect with another skin, I haven't tried.

I will remove the Vista skin.

Again thanks for you support.
Regards
Augusto

Ari Perlstein

8 posts

Member since:
Nov 2009

Posted 18 Mar 2010 Link to this post

Is there any plan to update the TimePicker to accommodate large time picking lists, such as this? I would love to have it look like the ComboBox with a scroller or act as the first poster mentioned with a separate select for Hour, Minute, and Meridiem. I tried to use the actual Combo Box for this functionality, but since I have multiple TimePickers on my page (7 day in / out time entry page) and the combobox does not have a ShareView possibility, that i know of, i have really no option.

PS: and 3 regular dropdowns x14 for this is really inelegant and also a lot of extra to download since they are already downloading the bulk of the telerik JS anyhow.

Martin

Admin

833 posts

Posted 24 Mar 2010 Link to this post

Hello Ari Perlstein,

I am afraid that currently we do not plan to implement such functionality to our time picker controls. As my colleague Veli explained - "RadTimePicker does not provide paging for its TimeView, as it was not intended to accommodate a large number of values.". In such scenarios you would need to use your own approach that you consider most appropriate. One option might be using different pickers for the different time parts as "License Developer" suggested earlier in this thread.

Regards,
Martin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.