CODEWITHSUNDEEP
xamarin.formsuwpdatepicker
Mars
Mars

Reputation: 339

Calendar Date Picker In Xamarin Forms UWP

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

Upvotes: 0

Views: 1821

Answers (2)

Michael &#216;sterberg Jakobsen
Michael &#216;sterberg Jakobsen

Reputation: 224

Changing the date value requires working with the date change events. See my working solution here:

https://stackoverflow.com/a/60449912/9523062

Upvotes: 0

Ax1le
Ax1le

Reputation: 6643

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://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/native-views/

Upvotes: 3

Related Questions