How to achieve TimePicker using SfPicker in Xamarin Forms?
In our Xamarin.Forms Picker, SfPicker control has multi column support. Using this we can populate Hour, Minute and Format values providing as a collection to SfPicker control.
We have demonstrated how to create CustomTimePicker using Picker control in the following steps.
Step 1: We have created custom class named as “CustomTimePicker”. This class should inherit from SfPicker control.
C#:
public class CustomTimePicker : SfPicker
{
}
Step 2: After that create four ObservableCollection with object type in CustomTimePicker class.
Collection details:
Time Collection, Minute Collection, Hour Collection and Format Collection.
Time Collection->We have added all the three collections.
Minute Collection -> We have added minutes from 0 to 59.
Hour Collection -> We have added hours from 1 to 12.
Format Collection -> We have added two format AM and PM.
The below code demonstrates Time collection creation.
C#:
public class CustomTimePicker: SfPicker
{
// Time api is used to modify the Hour collection as per change in Time
/// <summary>
/// Time is the acutal DataSource for SfPicker control which will holds the collection of Hour ,Minute and Format
/// </summary>
public ObservableCollection<object> Time { get; set; }
//Minute is the collection of minute numbers
public ObservableCollection<object> Minute;
//Hour is the collection of hour numbers
public ObservableCollection<object> Hour;
//Format is the collection of AM and PM
public ObservableCollection<object> Format;
public CustomTimePicker()
{
Time = new ObservableCollection<object>();
Hour = new ObservableCollection<object>();
Minute = new ObservableCollection<object>();
Format = new ObservableCollection<object>();
PopulateTimeCollection();
this.ItemsSource = Time;
}
private void PopulateTimeCollection()
{
//Populate Hour
for (int i = 1; i <= 12; i++)
{
Hour.Add(i.ToString());
}
//Populate Minute
for (int j = 0; j < 60; j++)
{
if (j < 10)
{
Minute.Add("0" + j);
}
else
Minute.Add(j.ToString());
}
//Populate Format
Format.Add("AM");
Format.Add("PM");
Time.Add(Hour);
Time.Add(Minute);
Time.Add(Format);
}
}
Step 3: We have defined each column headers “Hour”, “Minute” and “Format” using ColumnHeaderText property of SfPicker control. The below code demonstrates how to define header for each column of SfPicker control.
C#:
public class CustomTimePicker: SfPicker
{
/// <summary>
/// Header api is holds the column name for every column in time picker
/// </summary>
public ObservableCollection<string> Headers { get; set; }
public CustomTimePicker()
{
Headers = new ObservableCollection<string>();
if (Device.OS == TargetPlatform.Android)
{
Headers.Add("HOUR");
Headers.Add("MINUTE");
Headers.Add("FORMAT");
}
else
{
Headers.Add("Hour");
Headers.Add("Minute");
Headers.Add("Format");
}
// Column header text collection
this.ColumnHeaderText = Headers;
}
}
Step 4: Finally we have enabled SfPicker header, Column header and footer using ShowHeader , ShowFooter and ShowColumnHeader properties.
C#:
public CustomTimePicker()
{
//Enable Footer of SfPicker
ShowFooter = true;
//Enable Header of SfPicker
ShowHeader = true;
//Enable Column Header of SfPicker
ShowColumnHeader = true;
}
Step 5: We have added the CustomTimePicker control in main XAML page. Please refer the below code snippets.
XAML:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TimePickerSample"
x:Class="TimePickerSample.MainPage"
xmlns:picker="clr-namespace:Syncfusion.SfPicker.XForms;assembly=Syncfusion.SfPicker.XForms">
<!--Assign the TimePickerViewModel to BindingContext of Page-->
<ContentPage.BindingContext>
<local:TimePickerViewModel />
</ContentPage.BindingContext>
<Grid>
<Button
Clicked="Button_Clicked"
HeightRequest="30"
HorizontalOptions="Center"
Text="Show TimePicker"
VerticalOptions="Center"
WidthRequest="200" />
<!--Initialize the CustomTimePicker-->
<local:CustomTimePicker
x:Name="date"
ColumnHeaderHeight="40"
HorizontalOptions="Center"
VerticalOptions="Center"
PickerHeight="400"
PickerMode="Dialog"
PickerWidth="300"
SelectedItem="{Binding SelectedTime,Mode=TwoWay}"/>
</Grid>
</ContentPage>
C#:
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Clicked(object sender, EventArgs e)
{
date.IsOpen = !date.IsOpen;
}
}
Please find the below screen shot using the above code
We have attached TimePicker sample for your reference. Please download the sample from the following link.
Sample link: TimePicker
Conclusion
I hope you enjoyed learning about how to achieve TimePicker using SfPicker in Xamarin.Forms.
You can refer to our Xamarin.Forms Picker feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Picker documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
