Xamarin.Forms Datepicker in PopUp - xamarin.forms

Question

I create a project with Xamarin.Forms via MVVM, in which I want to generate a popup that accepts two data via a data picker. The user should specify a start date and an end date. Since I already needed it elsewhere, I already downloaded the ACR.UserDialogs NuGet package. I have also set up a DialogService in which the dialog receives three string parameters and would actually like a similar solution for the data picker. Does anyone have any idea how I can go about this?

Answer 1

Nuget packages: rg.plugins.popup, propertychanged.fody
MainView.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:datepickerpopup="clr-namespace:DatePickerPopup"
x:Class="DatePickerPopup.MainPage">
<ContentPage.BindingContext>
<datepickerpopup:MainViewModel/>
</ContentPage.BindingContext>
<StackLayout>
<Button Text="Open Popup"
Command="{Binding OpenPopup_Command}"
/>
<Label Text="{Binding SetDates_.StartDate}"/>
<Label Text="{Binding SetDates_.EndDate}"/>
</StackLayout>
</ContentPage>
MainViewModel.cs
using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace DatePickerPopup
{
public class MainViewModel : BaseViewModel
{
public SetDates SetDates_ { get; set; } = new SetDates();
public Command OpenPopup_Command => new Command(async () =>
{
DatePickerPop pop = new DatePickerPop();
var vm = pop.BindingContext as DatePickerViewModel;
vm.Save_Command = PopupSave_Command;
await PopupNavigation.Instance.PushAsync(pop);
});
public Command PopupSave_Command => new Command(async(param) =>
{
SetDates_ = param as SetDates;
await PopupNavigation.Instance.PopAllAsync();
});
}
}
DatePickerPop.xaml
<?xml version="1.0" encoding="utf-8" ?>
<animations:PopupPage xmlns:animations="http://rotorgames.com"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:datepickerpopup="clr-namespace:DatePickerPopup"
x:Class="DatePickerPopup.DatePickerPop">
<animations:PopupPage.BindingContext>
<datepickerpopup:DatePickerViewModel/>
</animations:PopupPage.BindingContext>
<StackLayout VerticalOptions="Center"
HorizontalOptions="Center"
BackgroundColor="White">
<DatePicker Date="{Binding SetDates_.StartDate}"/>
<DatePicker Date="{Binding SetDates_.EndDate}"/>
<Button Text="Save"
Command="{Binding Save_Command}"
CommandParameter="{Binding SetDates_}"/>
<Button Text="Cancel"
Command="{Binding Cancel_Command}"/>
</StackLayout>
</animations:PopupPage>
DatePickerViewModel.cs
using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace DatePickerPopup
{
public class DatePickerViewModel : BaseViewModel
{
public SetDates SetDates_ { get; set; } = new SetDates();
public Command Save_Command { get; set; }
public Command Cancel_Command => new Command(async () =>
await PopupNavigation.Instance.PopAsync());
}
}
SetDates.cs
using System;
using System.Collections.Generic;
using System.Text;
namespace DatePickerPopup
{
public class SetDates : BaseViewModel
{
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
}