Calendar Date Picker In Xamarin Forms UWP

Question

How to create a calendar type date picker in Xamarin forms UWP app.

So far I have tried this:

 <Image Grid.Row="3" Grid.Column="1" Source="Images/datePicker.png" WidthRequest="20" HeightRequest="20" Margin="-40,0,40,0" HorizontalOptions="End">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OnSelectDOBCommand}"/>
                        </Image.GestureRecognizers>
                    </Image>

 public void OnSelectDOB(object obj)
    {         
        dateOfBuildDatePicker = UserDialogs.Instance.DatePrompt(new DatePromptConfig { MaximumDate = DateTime.Today, OnAction = (result) => SetDateOfBirth(result), IsCancellable = true });
    }

But this displays the date picker control on top left corner of the screen. Is there a way to customize it so that it should display the date picker right next to the field where I click or is there any other control which can help me achieve this functionality.(Below image is the behavior that I am expecting)

Any help is appreciated ![Calendar Date Picker ]1

Anonymous Anonymous · Accepted Answer · 2019-05-21T09:16:39

If you want to consume a special control on UWP platform, you can try custom renderer.

Firstly, create a custom control:

public class CustomDatePicker : DatePicker
{
}

Then make a custom renderer on UWP:

[assembly: ExportRenderer(typeof(CustomDatePicker), typeof(CustomDatePickerRenderer))]
namespace Demo.UWP
{
    public class CustomDatePickerRenderer : ViewRenderer<DatePicker, Windows.UI.Xaml.Controls.CalendarDatePicker>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                Windows.UI.Xaml.Controls.CalendarDatePicker datePicker = new Windows.UI.Xaml.Controls.CalendarDatePicker();
                SetNativeControl(datePicker);
            }
        }
    }
}

At last, use it on your forms project:

<StackLayout>
    <local:CustomDatePicker HorizontalOptions="Start"/>
</StackLayout>

Alternatively, you can try native view: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/native-views/

Calendar Date Picker In Xamarin Forms UWP

3 Answers