Maui Nullable and Clearable DateTimePicker
The Nullable DateTimePicker is a custom calendar control for selecting a nullable date and time value in a .NET MAUI application. It provides a consistent and platform-independent user interface for selecting dates, and allows the user to clear the value if needed.
This control uses the
<a href="https://github.com/CommunityToolkit/Maui" target="_blank">CommunityToolkit.Maui</a> Popup
Usage
To use the Nullable DateTimePicker control in your .NET MAUI application, follow these steps:
0- Add the Sebarslan.Maui.NullableDateTimePicker nuget package to your project and add the .ConfigureNullableDateTimePicker() element to the MauiProgram.cs file in your project.
<pre>
<code>
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder()
.UseMauiApp<App>()
.ConfigureNullableDateTimePicker()
....
</code>
</pre>
Usage 1: Use DateTimePicker as ContentView control (With input field and icon)
1- Add the NullableDateTimePicker control to your XAML layout file:
xmlns:ndtp="clr-namespace:Maui.NullableDateTimePicker;assembly=Maui.NullableDateTimePicker"
<pre>
<code>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:ndtp="clr-namespace:Maui.NullableDateTimePicker;assembly=Maui.NullableDateTimePicker"
x:Class="Maui.NullableDateTimePicker.Samples.MainPage">
</code>
</pre>
2- And add the following code to the place where you want to use DateTimePicker and then connect the SelectedDateTime property with the Datetime Property in your ViewModel.
<pre>
<code>
<ndtp:NullableDateTimePicker SelectedDateTime="{Binding MyDateTime}" Mode="Date" />
</code>
</pre>
Usage 2: Use direct calendar popup with your own entry and button
<pre>
<code>
<HorizontalStackLayout HorizontalOptions="Fill" HeightRequest="40">
<Entry x:Name="DateTimeEntry" Text="{Binding MyDateTime, StringFormat='{0:g}'}"
HorizontalOptions="Fill"
VerticalOptions="Fill"
IsReadOnly="True" />
<ImageButton Source="{Binding CalendarIcon}"
Clicked="DateTimePicker_Clicked"
Margin="0"
Padding="2"
WidthRequest="30" />
</HorizontalStackLayout>
</code>
</pre>
<pre>
<code>
private async void DateTimePicker_Clicked(object sender, EventArgs e)
{
INullableDateTimePickerOptions nullableDateTimePickerOptions = new NullableDateTimePickerOptions
{
SelectedDateTime = MyDateTime,
Mode = PickerModes.DateTime,
ShowWeekNumbers = true
// .. other picker options
};
var result = await NullableDateTimePicker.OpenAsync(nullableDateTimePickerOptions);
if (result is PopupResult popupResult && popupResult.ButtonResult != PopupButtons.Cancel)
{
MyDateTime = popupResult.SelectedDateTime;
// DateTimeEntry.Text = popupResult.SelectedDateTime?.ToString("g"); //If you are not using ViewModel
}
}
</code>
</pre>
<pre>
<code>
NullableDateTimePicker dateTimePicker = new NullableDateTimePicker();
dateTimePicker.SelectedDateTimeChanged += OnSelectedDateTimeChanged;
private static void OnSelectedDateTimeChanged(object sender, DateTimeChangedEventArgs e)
{
Console.WriteLine("DateTime changed!");
Console.WriteLine("Old DateTime: " + e.OldDateTime);
Console.WriteLine("New DateTime: " + e.NewDateTime);
}
</code>
</pre>
<div>
<img src="https://raw.githubusercontent.com/sebarslan/Maui.NullableDateTimePicker/main/Screenshots/screenshot.png" height="300" />
<img src="https://raw.githubusercontent.com/sebarslan/Maui.NullableDateTimePicker/main/Screenshots/screenshot2.png" height="300" />
<img src="https://raw.githubusercontent.com/sebarslan/Maui.NullableDateTimePicker/main/Screenshots/screenshot3.png" height="300" />
<img src="https://raw.githubusercontent.com/sebarslan/Maui.NullableDateTimePicker/main/Screenshots/screenshot4.png" height="300" />
<img src="https://raw.githubusercontent.com/sebarslan/Maui.NullableDateTimePicker/main/Screenshots/screenshot5.png" height="300" />
</div>