Home

Awesome

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.

NuGet

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&lt;App&gt;() .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> &lt;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"&gt; </code> </pre>

2- And add the following code to the place where you want to use DateTimePicker and then connect the NullableDateTime property with the Datetime Property in your ViewModel.

<pre> <code> &lt;ndtp:NullableDateTimePicker NullableDateTime="{Binding MyDateTime}" Mode="Date" /&gt; </code> </pre>

Usage 2: Use direct calendar popup with your own entry and button

1- Add your entry and button for datetime in your xaml page (eg. MainPage.xaml)

<pre> <code> &lt;HorizontalStackLayout HorizontalOptions="Fill" HeightRequest="40"&gt; &lt;Entry x:Name="DateTimeEntry" Text="{Binding MyDateTime, StringFormat='{0:g}'}" HorizontalOptions="Fill" VerticalOptions="Fill" IsReadOnly="True" /&gt; &lt;ImageButton Source="{Binding CalendarIcon}" Clicked="DateTimePicker_Clicked" Margin="0" Padding="2" WidthRequest="30" /&gt; &lt;/HorizontalStackLayout&gt; </code> </pre>

2- Then, when you click on the button or entry, define the options and call NullableDateTimePicker.OpenCalendarAsync(options) to open the calendar in your xaml.cs file. (eg. MainPage.xaml.cs)

<pre> <code> private async void DateTimePicker_Clicked(object sender, EventArgs e) { INullableDateTimePickerOptions nullableDateTimePickerOptions = new NullableDateTimePickerOptions { NullableDateTime = MyDateTime, Mode = PickerModes.DateTime, ShowWeekNumbers = true // .. other calendar options }; var result = await NullableDateTimePicker.OpenCalendarAsync(nullableDateTimePickerOptions); if (result is PopupResult popupResult && popupResult.ButtonResult != PopupButtons.Cancel) { MyDateTime = popupResult.NullableDateTime; // DateTimeEntry.Text = popupResult.NullableDateTime?.ToString("g"); //If you are not using ViewModel } } </code> </pre>

More examples, please see the samples project

Options

DateTimePicker Calendar options

OptionDescriptionDefault Value
NullableDateTimeGets or sets the nullable date and time value of the control.null
ModeSpecifies the picker mode of the control. Valid values are Date, DateTime, and Time.Date
MinDateMinimum selectable date of the control.DateTime.MinValue
MaxDateMaximum selectable date of the control.DateTime.MaxValue
OkButtonTextThe text for the OK button.OK
CancelButtonTextThe text for the Cancel button.Cancel
ClearButtonTextGets or sets the text for the Clear button.Clear
ShowClearButtonClear button can be hidden/shown. If true, the button is displayed.true
HeaderForeColorGets or sets the foreground color of the control's header.White
HeaderBackgroundColorBackground color of the calendar's header.#2b0b98
ForeColorIt is used for the color of texts that cannot be styled in the calendar.Dark:White, Light:Black
BodyBackgroundColorBackground color of the calendar.White
ToolButtonsStyleStyle of the control's tool buttons.null
DayStyleStyle of the days in the calendar.null
SelectedDayStyleStyle of the selected day in the calendar.null
DayNamesStyleStyle of the day names in the calendar.null
OtherMonthDayStyleStyle of the other month days in the calendar.null
DisabledDayStyleStyle of the disabled days in the calendar.null
WeekNumberStyleStyle of the week numbers in the calendar.null
ShowWeekNumbersDetermines whether to display week numbers in the calendar.false
ShowOtherMonthDaysDetermines whether to display other month days in the calendar.true
Is12HourFormatDetermines whether to display the am/pm picker for the 12-hour format.false

Datetimepicker Input Options (If NullableDateTimePicker is used as ContentView)

OptionDescriptionDefault Value
FormatSpecifies the display format for the date or time.for date: d, for datetime: g, for time: t
BackgroundColorBackground color of the datetimepicker control.White
IconImagesource for the icon.null
TextColorText color of the entry.Black
FontFamilyFont family of the entry.Arial
FontSizeFont size of the entry.14
BorderColorBorder color of the datetimepicker controlnone
BorderWidthBorder width of the control0
CornerRadiusCorner radius of the control0
PlaceHolderPlaceholder of the entryempty

NullableDateTimeChanged Event (If NullableDateTimePicker is used as ContentView)

The NullableDateTimeChanged event is used to indicate when a NullableDateTime value has been changed. This event is commonly used in programming or software environments and is triggered when the NullableDateTime value is modified.

The event utilizes the DateTimeChangedEventArgs class as its argument. The DateTimeChangedEventArgs class contains additional information that is carried at the moment the event is triggered. It may include details about the date and time change, such as the old DateTime value and the new DateTime value.

Below is an example code snippet illustrating the usage of the "NullableDateTimeChanged" event and the "DateTimeChangedEventArgs" argument class:

<pre> <code> NullableDateTimePicker dateTimePicker = new NullableDateTimePicker(); dateTimePicker.NullableDateTimeChanged += OnNullableDateTimeChanged; private static void OnNullableDateTimeChanged(object sender, DateTimeChangedEventArgs e) { Console.WriteLine("DateTime changed!"); Console.WriteLine("Old DateTime: " + e.OldDateTime); Console.WriteLine("New DateTime: " + e.NewDateTime); } </code> </pre>

.NET MAUI handler was used in the test project to remove the underline in the original entry. Please refer to the MauiProgram.cs file in the sample project. For more detailed information about handlers, please check: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-8.0

License

The Nullable DateTimePicker control is licensed under the MIT License. See <a href="LICENSE.txt">LICENSE file</a> for more information.

Contributing

Contributions are welcome!

Screenshot

on ios, android, windows

DateTimePicker

Changelog

2.3.1

2.3.0

2.2.0

2.1.0

2.0.0

1.2.0

1.1.1

1.1.0

1.0.2

1.0.1