Xamarin Forms Month and Year Picker

How to create a native Month and Year Picker and use it from Xamarin Forms

Sometimes we want to select a Date with Month, Day and a Year and we can go with global custom picker on Xamarin.Forms or in an easy way create a Native picker to makes the app more predictable and harmonious for users. But what if we want to select only Month and a Year and still have only Native UI and Behavior? — Here is where my blog starts making sense. In this article, I will provide you with a way to create your own custom control with native Month-Year Picker for Android and iOS and show how you can use it 😋

bbenetskyy/GiveMeDateApp

That repo has a huge piece of code with logic, you can go and investigate it on your own or just copy into your project and use it 🤩 🥳. But in the blog post, I will focus only on parts that may be interesting for you.

Month Year Picker View Control

At Xamarin.Froms shared project we can use our Control in Xaml. For achieving that we should create a class which will be inherited from View. Next Step — create a BindableProperty for properties which we would like to customise our control. According to me, the next properties would be enough, but you may add or remove them according to your requirements.

And then you may use it in XAML:

Bindable Properties

As you can see our MonthYearPickerView use couple Bindable Properties for making possible to has some binging available at XAML. All of them are simple, you just need a Property and one Bindable Static Property with defined: property name, return type, default value, optionally you can also add default binding mode and other.

TextColor also define a default color to White because mostly in my examples, I will use this color. So now I can not specify it in XAML till I want to change that.

Here we should pay additional attention to properties binding at Xamarin.Forms, because some of them may use TypeConverter attributes, like FontSize property:

You can learn more about them in official Microsoft Documentation page:

Xamarin.Forms Bindable Properties - Xamarin

Android — DialogFragment

Now let’s start implementing native part of dialog for Android OS. It’s a huge class (~170 lines), so I just mention a couple of major points and all rest of them you should check by yourself.

• This Class should inherit Android.Support.V4.App.DialogFragment
• Create Dialog from our date_picker_dialog layout
• Initialize Year and Month Pickers
• Update Min/Max Values for Month During Scrolling

bbenetskyy/GiveMeDateApp

For what we need that update during Scrolling you may ask? — Because our Min or Max Dates may have some restriction in months.

For example, we want to allow a user to select a month and year between December 2019 and March 2022. So 2020 and 2021 year will have all months available to select, 2019 will have only one and 2021 only three months.

Android — Date Picker Dialog Layout

In the previous section, you saw that we should create dialog based on some layout file.

But is this file a predefined one at Xamarin.Android? — No, we should create them, in native XML.

But don’t be afraid, it will be a really simple layout file 😅.

Yeah, as I told you. Just two NumberPicker(s) centered with LinearLayout at global LinearLayout. And yes, it should be two of them if we want to center it correctly in Android. Don’t ask me why 🤔.

Android — Month Year Picker View Renderer

And the last thing in Android which should be done is Renderer, Renderer for our MonthYearPickerView control. This is not so huge class but has like ~120 lines of code, so again I just left a link to a whole class and focus at most interesting points.

bbenetskyy/GiveMeDateApp

Create custom controls with Xamarin.Forms renderers - Learn

Hope you also check out a link with examples of custom controls and I don’t require to remind that we should export our renderer above the namespace in our file:

The most interesting in this file is how we show the selected date, update it after selection changed and show picker dialog:

• Override OnElementChanged method to set Native Control and subscribe to Entry Focused Event.
• On Focus we create and show Picker Dialog and subscribe to OnDateTimeChanged and OnClosed

Let’s take a look closer to setting Native Control at OnElementChanged method, mean during element creating for the first time:

I was eject it to separate function named CreateAndSetNativeControl

Updating Text after selecting is quite similar:

iOS — Picker Date Model

This file is quite similar to Android Picker Dialog class and has ~180 lines of code, so yeah, again only link with homework for you to investigate it.

bbenetskyy/GiveMeDateApp

One what is good to mention that iOS does not change immediately selected values during the spin, we should wait while picker stop to select a new Date.

We should:

• Inherit from UIPickerViewModel
• Override GetTitle; GetComponentCount; GetRowsInComponent; and Selected methods.

Hmm, there seems to be a lot of work to do 🤨. But it’s not, all of them except Selected are quite simple 😁.

iOS — Month Year Picker Renderer

Same as for Android, this the last thing we need to do in iOS is to write a Renderer for Custom Control.

Let’s Export it!!!! 🤘

And Setup Picker by Initializing PickerDateModel, setting toolbar, native Picker View and set text to label on layout. Same as on Android all that we done at OnElementChanged, and I was eject it to separate function to make it more clear:

🥳🥳🥳 All work Done — let’s sum it up

So, unfortunately we don’t have such control out of box natively, but with knowledge of Android and iOS pickers and bindable properties in Xamarin Forms we can create our own 🤫

Code at GitHub met my view of this control and my expectation. You can copy/paste to your project and use it right away or update according to your project requirements by enhancing bindable properties or native picker behaviours, all up to you 😎

Bohdan Benetskyi is creating advanced CSS gradients for Xamarin, speak at conferences

bbenetskyy/GiveMeDateApp

This Cool background was done just in couple lines in 1 minute by Magic Gradients:

Xamarin.Forms Gradient Background For All Pages in 1 minute

Magic Gradients v1.1 released!

Acknowledgement

Special thanks to Andrii Kharechko for supporting me during writing this article. Thanks bro 😝

Andrii Kharechko - Full-stack .NET Developer - Nexio Management Ltd. | LinkedIn