The Telerik TimeSpanPicker for Xamarin provides users with a quick and easy way to select a time duration, and the duration interval can be measured in days, hours, minutes and all the way down to seconds. Just like all other picker controls from the Telerik UI for Xamarin suite, TimeSpanPicker is highly customizable—you can modify every part of the control, including the popup, spinners, header and footer as well as the displayed text before and after time interval is selected.
With some tweaks TimeSpanPicker can fit into any application design. Let's take a look!
As its name suggests, TimeSpanPicker control works with values of nullable TimeSpan type, which is suitable for defining duration. RadTimeSpanPicker allows you to choose a time interval in a range of more than a day. Whether you’d need to choose only days, days and hours, or just hours and minutes—this all depends on the SpinnerFormat setting. SpinnerFormat supports standard and custom format strings and depending on the format applied, the popup will display the corresponding spinners.
In addition, DisplayTextFormat property helps configure the way the selected time interval is formatted as soon as the popup is closed.
Here is a quick example which shows SpinnerFormat and DisplayTextFormat properties in action:
<
telerikInput:RadTimeSpanPicker
SpinnerFormat
=
"dd\.hh"
DisplayStringFormat
=
"d\ \D\a\y\s\,\ h\ \H\o\u\r\s"
/>
The short screencast below shows the result on an iOS simulator:
You can limit the time intervals duration by applying a minimum and maximum time. By default, users can choose between 0 and 30 days—if a longer period is not relevant to your scenario, you can easily decrease the interval through the flexible API of the TimeSpanPicker control with the help of the MinimumTime and MaximumTime properties:
<telerikInput:RadTimeSpanPicker
SpinnerFormat="dd\.hh"
DisplayStringFormat="d\ \D\a\y\s\,\ h\ \H\o\u\r\s"
MaximumTime="10:23:59:59" />
You can modify the visual appearance of every part of the TimeSpanPicker—from the label showing the selected time, through the popup and the spinners—all is easily customizable through a bunch of styling properties.
Let's play with the styling API a little bit:
<
telerikInput:RadTimeSpanPicker
SpinnerFormat
=
"dd\.hh"
DisplayStringFormat
=
"d\ \D\a\y\s\,\ h\ \H\o\u\r\s"
MaximumTime
=
"10:23:59:59"
SpinnerHeaderStyle
=
"{StaticResource spinnerHeaderStyle}"
SpinnerStyle
=
"{StaticResource spinnerStyle}"
SelectionHighlightStyle
=
"{StaticResource selectionHighlightStyle}"
>
<
telerikInput:RadTimeSpanPicker.SelectorSettings
>
<
telerikInput:PickerPopupSelectorSettings
PopupOutsideBackgroundColor
=
"#D9D9D9CC"
PopupViewStyle
=
"{StaticResource popupViewStyle}"
HeaderStyle
=
"{StaticResource headerStyle}"
HeaderLabelText
=
"Pick a time interval"
HeaderLabelStyle
=
"{StaticResource headerLabelStyle}"
FooterStyle
=
"{StaticResource footerStyle}"
AcceptButtonStyle
=
"{StaticResource yesNoButtonStyle}"
CancelButtonStyle
=
"{StaticResource yesNoButtonStyle}"
AcceptButtonText
=
"Yes"
CancelButtonText
=
"No"
/>
</
telerikInput:RadTimeSpanPicker.SelectorSettings
>
</
telerikInput:RadTimeSpanPicker
>
You would also need to add the referenced StaticResources to the page:
<
ResourceDictionary
>
<
Style
TargetType
=
"Label"
x:Key
=
"spinnerHeaderStyle"
>
<
Setter
Property
=
"TextColor"
Value
=
"#006D49"
/>
<
Setter
Property
=
"HorizontalTextAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"VerticalTextAlignment"
Value
=
"Center"
/>
</
Style
>
<
Style
TargetType
=
"telerikDataControls:RadSpinner"
x:Key
=
"spinnerStyle"
>
<
Setter
Property
=
"ItemStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikDataControls:SpinnerItemView"
>
<
Setter
Property
=
"TextColor"
Value
=
"#797979"
/>
<
Setter
Property
=
"BackgroundColor"
Value
=
"#F4F4F4"
/>
<
Setter
Property
=
"CornerRadius"
Value
=
"15"
/>
<
Setter
Property
=
"Margin"
Value
=
"6, 4"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"SelectedItemStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"telerikDataControls:SpinnerItemView"
>
<
Setter
Property
=
"TextColor"
Value
=
"#009954"
/>
<
Setter
Property
=
"BackgroundColor"
Value
=
"#DBFFD6"
/>
<
Setter
Property
=
"CornerRadius"
Value
=
"15"
/>
<
Setter
Property
=
"Margin"
Value
=
"6, 4"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
TargetType
=
"telerikPrimitives:RadBorder"
x:Key
=
"selectionHighlightStyle"
>
<
Setter
Property
=
"BorderColor"
Value
=
"#009954"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"1"
/>
<
Setter
Property
=
"Padding"
Value
=
"0,6,0,6"
/>
<
Setter
Property
=
"HeightRequest"
Value
=
"40"
/>
<
Setter
Property
=
"VerticalOptions"
Value
=
"Center"
/>
<
Setter
Property
=
"BackgroundColor"
Value
=
"#F9F9F9"
/>
<
Setter
Property
=
"CornerRadius"
Value
=
"10"
/>
</
Style
>
<
Style
TargetType
=
"telerikInput:PickerPopupContentView"
x:Key
=
"popupViewStyle"
>
<
Setter
Property
=
"BackgroundColor"
Value
=
"White"
/>
<
Setter
Property
=
"WidthRequest"
Value
=
"250"
/>
<
Setter
Property
=
"CornerRadius"
Value
=
"10"
/>
</
Style
>
<
Style
TargetType
=
"telerikInput:PickerPopupHeaderView"
x:Key
=
"headerStyle"
>
<
Setter
Property
=
"BackgroundColor"
Value
=
"#67CE52"
/>
<
Setter
Property
=
"HeightRequest"
Value
=
"60"
/>
<
Setter
Property
=
"HorizontalOptions"
Value
=
"FillAndExpand"
/>
<
Setter
Property
=
"VerticalOptions"
Value
=
"FillAndExpand"
/>
</
Style
>
<
Style
TargetType
=
"Label"
x:Key
=
"headerLabelStyle"
>
<
Setter
Property
=
"TextColor"
Value
=
"White"
/>
<
Setter
Property
=
"HorizontalOptions"
Value
=
"Center"
/>
<
Setter
Property
=
"VerticalOptions"
Value
=
"Center"
/>
<
Setter
Property
=
"FontSize"
Value
=
"Default"
/>
</
Style
>
<
Style
TargetType
=
"telerikInput:PickerPopupFooterView"
x:Key
=
"footerStyle"
>
<
Setter
Property
=
"BackgroundColor"
Value
=
"#67CE52"
/>
</
Style
>
<
Style
TargetType
=
"Button"
x:Key
=
"yesNoButtonStyle"
>
<
Setter
Property
=
"BackgroundColor"
Value
=
"Transparent"
/>
<
Setter
Property
=
"TextColor"
Value
=
"White"
/>
</
Style
>
</
ResourceDictionary
>
And here is the result on Android and iOS:
There are a few more features that worth mentioning as they can be useful in various scenarios:
We would love to hear what you think about the TimeSpanPicker Xamarin control and how we can improve it. If you have any ideas for features to add, do not hesitate to share this information with us on our Telerik UI for Xamarin Feedback portal.
Don’t forget to check out the various demos of the control in our SDK Sample Browser and the Telerik UI for Xamarin Demos application.
If you have not yet tried the Telerik UI for Xamarin suite, take it out for a spin with a 30-day free trial, offering all the functionalities and controls at your disposal at zero cost.
Happy coding with our controls!
Yana Kerpecheva is a Senior Technical Support Engineer on the Telerik UI for Xamarin team. She has been working with Telerik products since 2008, when she joined the company. Apart from work, she likes skiing and travelling to new places.