DATE PICKER MINIMUM AND MAXIMUM DATES

Question

In .NET MAUI 8

I have created a little test code to select a range of dates.

        <Grid Margin="10">
            <Frame BorderColor="Black">
                <Grid RowDefinitions="Auto,Auto,Auto" ColumnDefinitions="Auto,Auto">
                    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                           Text="Date range" HorizontalOptions="Center" Margin="0,0,0,10"/>
                    <Label Grid.Row="1" Grid.Column="0" Text="From: " Padding="0,13,0,0"/>
                    <Label Grid.Row="2" Grid.Column="0" Text="To:"    Padding="0,13,0,0"/>
                    
                    <DatePicker x:Name="pickerFrom" Grid.Row="1" Grid.Column="1"
                                Date="{Binding DateStart}"/>
                    <DatePicker x:Name="pickerTo"   Grid.Row="2" Grid.Column="1"
                                Date="{Binding DateEnd}"/>
                </Grid>
            </Frame>
        </Grid>

The back code is:

	public FilterPage()
	{
		InitializeComponent();

		minDate = new DateTime(2025, 1, 2);
		maxDate = new DateTime(2025, 2, 28);
		pickerFrom.MinimumDate = minDate;
		pickerTo.MaximumDate = maxDate;
		DateStart = minDate;
		DateEnd = maxDate;
		BindingContext = this;
	}

	private DateTime minDate, maxDate, dateStart, dateEnd;

	public DateTime DateStart
	{
		get => dateStart;
		set
		{
			dateStart = value;
			pickerTo.MinimumDate = dateStart;
            OnPropertyChanged("DateStart");
		}
	}
    public DateTime DateEnd
    {
        get => dateEnd;
        set
        {
            dateEnd = value;
			pickerFrom.MaximumDate = dateEnd;
            OnPropertyChanged("DateEnd");
        }
    }

The idea is: the user selects a range of dates by means of the DatePicker's: pickerFrom and pickerTo; the values are bound to DateStart and DateEnd.

These dates must be within the limits of minDate, maxDate (with testing values created in the constructor). However, obviously DateStart cannot exceed DateEnd; to achieve this, selection of DateStart sets MinimuDate for pickerTo, and selection of DateEnd sets the MaximumDate for pickerFrom. In principle this could be achieved by relative bindings between the DatePicker's in XAML, but I got confusing results, so I opted for a programmatic approach.

All this works as expected in Windows Machine. With the Android Emulator I get a strange behavior.

1. Starting from the values in the program, change StartDate to 2/14/2025 - then pickerTo will not allow a lower date;
2. Change StartDate to 2/3/2025: the minimum date for pickerTo remains 2/14 as before!
3. Similar wrong behavior for the maximum date for pickerFrom, after changing DateEnd.

Answer 1

Hello,

This issue is related to setMinDate() for DatePicker doesn't work when invoked a second time in native android platform. You can fix this issue by adding DatePickerHandler for Android platform.

Firstly, please create a custom DatePicker

namespace MauiApp15
{
  public class CustomDatePicker:DatePicker
    {
    }
}

Then add a handler

namespace MauiApp15
{
    public partial class CustomDatePickerHandler: DatePickerHandler
    {
    }
}

Next, create a CustomDatePickerHandler in the Platform/Android folder. Before set the setMinDate, I will set dialog.DatePicker.MinDate = 0; and await Task.Delay(300);

using Android.App;
using AndroidX.AppCompat.Widget;
 
using Android.Content;
using Microsoft.Maui.Handlers;
using Microsoft.Maui.Platform;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Maui.Controls.PlatformConfiguration;
 
 
namespace MauiApp15.Platforms.Android
{
    public partial class CustomDatePickerHandler: DatePickerHandler
    {
        DatePickerDialog _dialog;
        protected override void ConnectHandler(MauiDatePicker platformView)
        {
            base.ConnectHandler(platformView);
        }
        protected override void DisconnectHandler(MauiDatePicker platformView)
        {
            if (_dialog != null)
            {
                _dialog.DismissEvent -= _dialog_DismissEvent;
                _dialog.ShowEvent -= _dialog_ShowEvent;
            }
            base.DisconnectHandler(platformView);
        }
        protected override DatePickerDialog CreateDatePickerDialog(int year, int month, int day)
        {
            if (_dialog != null)
            {
                _dialog.DismissEvent -= _dialog_DismissEvent;
                _dialog.ShowEvent -= _dialog_ShowEvent;
            }
            _dialog = new DatePickerDialog(Context!, (o, e) =>
            {
                if (VirtualView != null)
                {
                    VirtualView.Date = e.Date;
                }
            }, year, month, day);
            _dialog.ShowEvent += _dialog_ShowEvent;
            _dialog.SetCanceledOnTouchOutside(true);
            _dialog.SetCancelable(true);
            _dialog.DismissEvent += _dialog_DismissEvent;
            return _dialog;
        }
 
        private async void _dialog_ShowEvent(object sender, EventArgs e)
        {
            var oldValue = _dialog.DatePicker.MinDate;
            _dialog.DatePicker.MinDate = 0;
           await Task.Delay(300);
            _dialog.DatePicker.MinDate = oldValue;
        }
 
        private void _dialog_DismissEvent(object? sender, EventArgs e)
        {
        }
    }
}

Next, you can register this handler in the MauiProgram.cs.

public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
               ...
                .ConfigureMauiHandlers(handlers =>
                {
#if ANDROID
                    handlers.AddHandler(typeof(CustomDatePicker), typeof(MauiApp15.Platforms.Android.CustomDatePickerHandler));
#endif
                }); ;

In the end, please use this custom DatePicker in the Grid

    <local:CustomDatePicker x:Name="pickerFrom" Grid.Row="1" Grid.Column="1"
                         Date="{Binding DateStart,Mode=TwoWay}"/>
<local:CustomDatePicker  x:Name="pickerTo"   Grid.Row="2" Grid.Column="1"
                         Date="{Binding DateEnd,Mode=TwoWay}"/>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.