Pick a Date with Telerik Date Picker for Xamarin

With the R2 2020 Release of Telerik UI for Xamarin we have extended our list of picker components with three new pickers: DatePicker, TimePicker and TimeSpan Picker.

The DatePicker control for Xamarin provides the end users of your Xamarin.Forms application with the ability to easily and intuitively select a date via a customizable spinner dialog that lets them pick the month, day and year of the desired date.

You can use the date picker in a variety of different use cases when you need to select a date. For example, if you happen to be working on a booking/reservation app, your users will need to pick a date to make a reservation. Whatever the use case, our Date Picker control for Xamarin is here to help you speed up your development!

In this blog post I will get you familiar with the Date Picker control. You can learn about all the features it has and how you can easily customize it using the control’s flexible styling API.

Spinner Format

The Date Picker for Xamarin allows you to use standard or custom date format strings through the SpinnerFormat property. Depending on what format is set, the picker visualizes spinner controls with prepopulated values to be picked.

Examples with different SpinnerFormat values:

<telerikInput:RadDatePicker SpinnerFormat="yyyy/MMM"/>

<telerikInput:RadDatePicker SpinnerFormat="yyyy/MMM//dd"/>

<telerikInput:RadDatePicker SpinnerFormat="MMM//dd"/>

Date Range

Date Picker allows you to define a date range and choose a date in between through the MinimumDate and MaximumDate properties. For example:

<telerikInput:RadDatePicker MinimumDate="2020,01,01"
                   MaximumDate="2021,12,31"
                   DefaultHighlightedDate="2020,07,10"/>

DisplayString Format

This feature gives you the opportunity to define what string format the date will be displayed when a date from the picker is picked. Please keep in mind that the format set to DisplayStringFormat must be a valid date string format. For example we will use the following formats for SpinnerFormat and DisplayStringFormat:

<telerikInput:RadDatePicker SpinnerFormat="MMM//dd"
                   DisplayStringFormat="yyyy/MMMM/dd"/>

and the result is:

Flexible Styling API

We have exposed the Flexible Styling API, which allows you to design the perfect date picker for your mobile application. You can style the date picker and the dialog appearance.

For more information and sample demo please review our Styling article.

Templates

In addition, we have exposed templates that give you the ability to fully customize the look of the Date Picker component. The dates are visualized inside a popup, so we also give you the option to customize its header and footer through the HeaderTemplate and the FooterTemplate properties. For more details you can check our documentation and SDK Browser Application and Telerik Sample Examples.

Tell Us What You Think

We would love to hear what you think about the Date Picker control and how we can continue to 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 and stay with us! If you are curious about TimeSpan Picker and its usage, we are excited to share more with you in an upcoming blog post. :)