Telerik blogs
XamarinT2 Light_1200x303
Back in our R2 2020 release of Telerik UI for Xamarin we extended our list of picker components to cover all scenarios for choosing date, time or time interval. We’ve already introduced you to our Xamarin DatePicker and TimePicker controls and now it’s time to take a closer look at TimeSpanPicker control.


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!

xamarin_timespanpicker_firstlook

Choose the TimeFormat

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:

timespanpicker_formats

Apply Min/Max Time Intervals

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" />

Style it per Your own Preferences

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:

timespanpicker_styling

Other Useful Features

There are a few more features that worth mentioning as they can be useful in various scenarios:

  • Localization - you can translate the TimeSpanPicker texts to other languages, so that your app can be adapted to different regions. Check out the Localization topic for more information on the exact localization strings.
  • Incremental Time Steps - the spinners in the popup show all available values for the days, hours, minutes and seconds. If you would like to show only 15-minutes intervals, that can be easily configured. RadTimeSpanPicker provides “step” properties, namely DayStep, HourStep, MinuteStep and SecondStep, so you can adjust the spinners according to the scenario at hand.
  • Default Highlighted Time - when no time interval is selected and the popup is open, you can specify the default value of each spinner with the DefaultHighlightedTime property—this is useful in case you'd like to highlight the most probable value for users to choose.

Let Us Know What You Think

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!


YanaKerpecheva
About the Author

Yana Kerpecheva

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.

Related Posts

Comments

Comments are disabled in preview mode.