CODEWITHSUNDEEP
c#xamarinmobilexamarin.formsdatepicker
Cruik
Cruik

Reputation: 200

Customize Xamarin.Forms.Datepicker to pick and visualize multiple Dates

i'm kinda new to the whole wpf/xamarin UI thing and want to start my first mobile app. So, like the title contains already the topic of this question, i would like to use the standard Xamarin.Forms Datepicker to let the user pick multiple Dates.

I guess it will be pretty easy to submit on the Event for picking a date and put this into an array for the selected Dates.

But how can i visualize all the selected Dates in the Datepicker Dialog? Is there any possability to do this with this Control?

Thanks :)

Upvotes: 0

Views: 2054

Answers (3)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10938

For your requirement, you could use Calendar. The SfCalendar plugin provide the MultiSelection SelectionMode to do that. 

 <syncfusion:SfCalendar
            x:Name="calendar"
            SelectionChanged="calendar_SelectionChanged"
            SelectionMode="MultiSelection" />

enter image description here

If you want to get all the list of select dates, you could do that in calendar_SelectionChanged event.

 private void calendar_SelectionChanged(object sender, Syncfusion.SfCalendar.XForms.SelectionChangedEventArgs e)
    {
        var dateAdded = e.DateAdded;
        var dateRemoved = e.DateRemoved;

        if (dateRemoved != null)
        {
            list = dateAdded.Except(dateRemoved).ToList();
        }
        else
        {
            list = dateAdded.ToList();
        }         

    }

Upvotes: 1

ToolmakerSteve
ToolmakerSteve

Reputation: 21213

One way to display a variable-length list of editable dates:

  • In your "view model" class (or whatever you use as BindingContext), maintain the list of dates as a property that is an ObservableCollection: ObservableCollection<DateTime> Dates { get; set; } = new ObservableCollection<DateTime>();
  • In your "view" (or "page") class, have a ListView (or the newer CollectionView), with an item template that includes a DateView picker. And Source={Binding Dates}. See https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/datepicker for an example that includes two datepickers. Except instead of explicitly putting two datepickers into your xaml, you'll put the list with its item template.
  • Have a button to add a new date to the list.
  • In item template, have a button to the right of the datepicker. Use this to remove that date, from the corresponding Dates property.

If there is a limit to how many dates you want to show, instead of having a ListView, you could manually add the maximum number of date pickers to your View or Page. Similar to the link I gave above. Then add a checkbox next to each; use that to enable/disable that date.

Upvotes: 1

Adin Sijamija
Adin Sijamija

Reputation: 735

So you want display multiple dates that you previously selected? I dont think that is possible with a Xamarin date picker. The Xamarin date picker only contains one date at a time as seen in the docs. You could make your custom datePicker but you would have to do that for every platform. The way I would do it is update a another display property every time you select a date via a date picker. Something like a clickable label or something similar.

Upvotes: 1

Related Questions