
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
13 Answers, 1 is accepted
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.

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>
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.


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.

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
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.

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
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.

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

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.
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.