TimePicker handling of 12h /24h format

Yesterday I was wondering if the actual release of the toolkit TimePicker is able to correctly handle the 12h /24h formats. 
I found here, in the issue tracker of the Silverlight toolkit, a post that suggested some changes of the code to make that control determinate Phone Settings for 24/12 hour clock selection, and not use the Locale setting.

Fortunately it was an old post and when I made some tests, I realized that the actual release of the TimePicker is able to handle in the right way both the displayed final choosen time and the input time page (as shown in the following screenshots) depending on the phone user settings.

For example if the phone is set region UK and with 24-hour clock at OFF, the TimePicker displays as follows:



If the phone is set region UK and with 24-hour clock at ON, the TimePicker displays as follows:



It is worth noting that, if the phone is set to region IT there is no more the 24-hour clock toggleswitch in the data e ora (date+time) setting page and the 24-hour clock is set to 24 by default.


So in this case the TimePicker displays as follows [note that since toolkit’s November 2011 version, also that control is localized in the right way (with previous versions the localization had to be done by hand) and so CHOOSE TIME is translated to SCEGLI L’ORA]:


By default the TimePicker displays only hours and minutes (that is a ValueStringFormat=”{}{0:t}”) but, if you like to show also the seconds, you can set a different format, even thought the chooser page allows only to pick hour and minute:


Note that, setting Value=”{x:Null}”, we provide a blank starting value.

   <toolkit:TimePicker  Value="{x:Null}" x:Name="TimePickerClock" ValueStringFormat="{}{0:T}" Margin="0" HorizontalAlignment="Center" FontWeight="Bold" MinWidth="140" Hold="TimePickerClock_Hold" Tap="TimePickerClock_Tap" />

If you like, you can also force the final time to be shown in a custom way, not necessarely related to the phone setting, but I personally discourage to do that expecially if the application is multilanguage. Anyway you can do that to force a 24h with seconds:


I found also a nice post in Delay’s Blog that gives a summary table for the most useful format string for both TimePicker and DatePicker. It is worth to note that, because format strings include “{” and “}”, they’re a little tricky to code in XAML and you need to escape the special characters: here’s an example of what this looks like in its simplest default form: ValueStringFormat=”{}{0:t}”
In the same post you can find a complete example of how to customize the full-screen picker page: it is as simple as setting TimePicker.PickerPageUri property (or the DatePicker.PickerPageUri one) to point to a custom PhoneApplicationPage that must implement the IDateTimePickerPage interface. It is worth to note that the PickerPageUri property uses the standard assembly-relative syntax (“/assemblyShortName;component/resourceLocation”).

P.S. Some useful link for formatting datetime and, in general, strings are the following:



Informazioni su Enzo Contini

Electronic engineer
Questa voce è stata pubblicata in Smartphone OS e contrassegnata con . Contrassegna il permalink.

Lascia un Commento/Leave a comment

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.