Using TimeOnly in the .NET MAUI TimePicker
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 TimePicker 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 TimePicker using a converter.
1. Define the TimePicker control and the time properties:
<VerticalStackLayout WidthRequest="300" HorizontalOptions="Center">
<VerticalStackLayout.BindingContext>
<local:ViewModel />
</VerticalStackLayout.BindingContext>
<telerik:RadTimePicker x:Name="timePicker"
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 TimePicker TimeOnly example, go to the SDKBrowser Demo Application and navigate to the TimePicker > TimeOnly category.