formatting time picker

[ewart]

Hi, I was using the time picker to select the number a hours/minutes for a workout, rather than a specific time, e.g. I worked out 2:00 hours or 2:30 hours.  

nb was working but code broke when I upgraded to latest telerik library, seems not many people are using the control in this way perhaps. 

Basically I want the input and the popup to display in HH:mm format - without any "am/pm"

<telerikInput:RadTimePicker Name="dtDuration" Grid.Row="2" Grid.Column="1" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center"                                                            Width="120" Margin="0,0,0,0" TimeInterval="00:10:00" EndTime="4:0:0" IsReadOnly="False"  HeaderContent="{Binding Source={StaticResource LocalisationStrings}, Path=MappingStrings.LengthQuestion}"                                                             SelectedTimeChanged="dtDuration_SelectedTimeChanged"/>

How can I get this format?  I kinda expected there would be a simple format property but can't seem to find it in any documentation or examples or forums.  The pictures in the documentation  actually show without the AM/PM but they are out of dae.  Do I have to load the control into blend and restyle it in some way?

kind regards
  ewart.

[Miroslav Nedyalkov]

Hello Ewart,

 The TimePicker control is designed for picking specific time of the day, but not a time interval. Though you can still hide the AM/PM designator using the Culture property of the DateTimePicker control. What we use to format the time is the DateTimeFormat property of the currently set culture if any or of the default one if there is no culture set. The DateTimeFormat is of type DateTimeFormatInfo and contains information about the format of the date and the time and there you can specify that the time format is from 0 to 23 and doesn't you designators.

Hope this information is helpful!

Kind regards,
Miroslav Nedyalkov
the Telerik team

[ewart]

Thanks for your help I am now closer - all the telerik DateTimePicker documentation shows clearly the effect I am trying to achieve without am/pm.

http://www.telerik.com/help/silverlight/radtimepicker-overview.html
http://www.telerik.com/help/silverlight/radtimepicker-structure.html
http://www.telerik.com/help/silverlight/radtimepicker-timepicker-populating.html
http://www.telerik.com/help/silverlight/radtimepicker-radtimepicker-dynamic-creation.html
http://www.telerik.com/help/silverlight/radtimepicker-header-template.html
http://www.telerik.com/help/silverlight/radtimepicker-layout-support.html

I've managed to replicate this partially from your advice - by setting the following it removes the AM/PM from the main input field

// Remove the AM/PM from the picker
dtDuration.Culture = CultureInfo.InvariantCulture;

but it won't replicate the popup you guys have, obviously I'm still missing something?

Regards
  Ewart.

[ewart]

pps I also desperatly (this defect in my app holding my app deployment up, yippe!) need to know how to change the label in the header from "clock".  I followed the documentation example on this page http://www.telerik.com/help/silverlight/radtimepicker-header-template.html but it simply doesn't work for me, my xaml being:

it was working in the previous radtimpicker release, so maybe the docs are just out of date now I assume.

<telerikInput:RadTimePicker Name="dtDuration" Grid.Row="2" Grid.Column="1" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" HeaderContent="some text"
                            Width="120" Margin="0,0,0,0" TimeInterval="00:10:00" EndTime="4:0:0" IsReadOnly="False" >


</telerikInput:RadTimePicker>

[Kaloyan]

Hello ewart,

The fix will be included in today's internal build. Also all of the RadTimePicker properties are now configurable from the ClockStyle property: Follow the code bellow:

<telerik:RadTimePicker x:Name="radTimePicker" HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <telerik:RadTimePicker.ClockStyle>
                <Style TargetType="telerikInput:RadClock">
                    <Setter Property="Header" Value="Custom Clock" />
                </Style>
            </telerik:RadTimePicker.ClockStyle>
</telerik:RadTimePicker>

Regards,
Kaloyan
the Telerik team

[ewart]

Hiya -

Firstly to clarify your last - your saying the internal build will fix my first problem with the HH:MM formatting, right?    (as opposed to the documentation issues).  If so no problem as I need to download it for another reason anyway.

Secondly, still having some trouble with the header.  The new code works fine with a hardcoded value except that in my earlier example you will see I am binding to get the language localized text.  This fails every time; I'm not a xaml expert but I assume (as the same line works fine on a textblock) that it doesn't work because the binding is inside a <Setter>  Maybe I need a different binding path?

When I tried a workaround of setting it in code, myHeader is null, which kinda makes sense,  maybe I need a .SetValue() of some kind but in any regard I expect to be able to still bind my localized name like in the previous version of the control.  How to make this work again?

<UserControl.Resources>
<localResources:ResourceWrapper x:Key="LocalisationStrings" />
</UserControl.Resources>

<telerikInput:RadTimePicker Name="dtDuration" Grid.Row="2" Grid.Column="1" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center"
  Width="120" Margin="0,0,0,0" TimeInterval="00:10:00" EndTime="4:0:0" IsReadOnly="False" SelectedTimeChanged="dtDuration_SelectedTimeChanged_1" >
<telerikInput:RadTimePicker.ClockStyle>
  <Style TargetType="telerikInput:RadClock">
    <Setter Property="Header" x:Name="myHeader" Value="Binding Source={StaticResource LocalisationStrings}, Path=MappingStrings.LengthQuestion}" />
  </Style>
  </telerikInput:RadTimePicker.ClockStyle>
</telerikInput:RadTimePicker>

 <telerikInput:RadTimePicker.ClockStyle>
   <Style TargetType="telerikInput:RadClock">
      <Setter Property="Header" x:Name="myHeader" Value="Clock" />
   </Style>
</telerikInput:RadTimePicker.ClockStyle>

myHeader.Value = MappingStrings.LengthQuestion;  // FAILS with null

[George]

Hello ewart,

Please accept our apologies for the delayed reply.

To localize Header for RadClock, you could use LocalizationManager.
First, create resource files with key clock. Then, in the xaml you could define the Header :

<telerik:RadClock.Header>
                <TextBlock Text="Clock" telerik:LocalizationManager.ResourceKey="clock" Foreground="White" />
            </telerik:RadClock.Header>

and the codebehind you could set ResourceManager:

LocalizationManager.Manager = new LocalizationManager()
            {
                ResourceManager = LocalizationDictionary.ResourceManager
            };

            LocalizationManager.DefaultCulture = new CultureInfo("your-default-culture");

For detail information about Localization you could refer to our online documentation: http://www.telerik.com/help/silverlight/common-localization.html

I hope this helps! I will be glad to assist you further.

Best wishes,
George
the Telerik team