Using TimeOnly in the .NET MAUI TimeSpanPicker
If your application needs to store or manipulate only the time without the date portion, you can take advantage of the TimeOnly struct when working with the TimeSpanPicker control.
You can set a TimeOnly value to the MinimumTime, MaximumTime, Time, and DefaultHighlightedTime properties by using the Telerik TimeOnlyToTimeSpanConverterconverter. The converter converts System.TimeOnly to System.TimeSpan and System.TimeSpan to System.TimeOnly.
Here is the converter definition in XAML:
<telerik:TimeOnlyToTimeSpanConverter x:Key="TimeOnlyToTimeSpanConverter" />
The following example demonstrates how to set TimeOnly in the TimeSpanPicker using a converter.
1. Define the TimeSpanPicker control and the time properties:
<VerticalStackLayout WidthRequest="300" HorizontalOptions="Center">
<VerticalStackLayout.BindingContext>
<local:ViewModel />
</VerticalStackLayout.BindingContext>
<telerik:RadTimeSpanPicker x:Name="timeSpanPicker"
MinimumTime="{Binding MinimumTime, Converter={StaticResource TimeOnlyToTimeSpanConverter}}"
DefaultHighlightedTime="{Binding DefaultHighlightedTime, Converter={StaticResource TimeOnlyToTimeSpanConverter}}"
Time="{Binding SelectedTime, Mode=TwoWay, Converter={StaticResource TimeOnlyToTimeSpanConverter}}"
MaximumTime="{Binding MaximumTime, Converter={StaticResource TimeOnlyToTimeSpanConverter}}"
WidthRequest="{OnPlatform MacCatalyst=300, WinUI=300}"
HorizontalOptions="{OnPlatform MacCatalyst=Center, WinUI=Center}" />
</VerticalStackLayout>
2. Define the converter in the Page's resource:
<telerik:TimeOnlyToTimeSpanConverter x:Key="TimeOnlyToTimeSpanConverter" />
3. Add the telerik namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
4. Add the ViewModel:
For the TimeSpanPicker TimeOnly example, go to the SDKBrowser Demo Application and navigate to the TimeSpanPicker > TimeOnly category.