WaitForResultAsync()
80 | {
81 | return _tcs.Task;
82 | }
83 |
84 | protected override void OnDisappearing()
85 | {
86 | base.OnDisappearing();
87 | _tcs.TrySetResult(null);
88 | }
89 | #endif
90 |
91 | internal void ClosePopup(PopupButtons buttonResult)
92 | {
93 | try
94 | {
95 | _content.OkButtonClicked -= okButtonClickedHandler;
96 | _content.ClearButtonClicked -= clearButtonClickedHandler;
97 | _content.CancelButtonClicked -= cancelButtonClickedHandler;
98 |
99 | #if WINDOWS
100 | _tcs.TrySetResult(new PopupResult(_content.SelectedDate, buttonResult));
101 | #else
102 | Close(new PopupResult(_content.SelectedDate, buttonResult));
103 | #endif
104 |
105 | }
106 | catch (Exception ex)
107 | {
108 | Console.WriteLine(ex.ToString());
109 | }
110 | finally
111 | {
112 | Content = null;
113 | }
114 | }
115 |
116 | public void Dispose()
117 | {
118 | Dispose(true);
119 |
120 | GC.SuppressFinalize(this);
121 | }
122 |
123 | ~NullableDateTimePickerPopup()
124 | {
125 | Dispose(false);
126 | }
127 |
128 | protected virtual void Dispose(bool disposing)
129 | {
130 | if (!_disposed)
131 | {
132 | if (disposing)
133 | {
134 | _content = null;
135 | }
136 | _disposed = true;
137 | }
138 | }
139 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Maui Nullable and Clearable DateTimePicker
2 | 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.
3 |
4 |
5 | This control uses the CommunityToolkit.Maui Popup.
6 |
7 | [](https://www.nuget.org/packages/Sebarslan.Maui.NullableDateTimePicker)
8 |
9 |
10 | # Usage
11 | To use the Nullable DateTimePicker control in your .NET MAUI application, follow these steps:
12 |
13 | 0- Add the Sebarslan.Maui.NullableDateTimePicker nuget package to your project and add the .ConfigureNullableDateTimePicker() element to the MauiProgram.cs file in your project.
14 |
15 |
16 |
17 | public static MauiApp CreateMauiApp()
18 | {
19 | var builder = MauiApp.CreateBuilder()
20 | .UseMauiApp<App>()
21 | .ConfigureNullableDateTimePicker()
22 | ....
23 |
24 |
25 |
26 | ### Usage 1: Use DateTimePicker as ContentView control (With input field and icon)
27 | 1- Add the NullableDateTimePicker control to your XAML layout file:
28 |
29 | xmlns:ndtp="clr-namespace:Maui.NullableDateTimePicker;assembly=Maui.NullableDateTimePicker"
30 |
31 |
32 | <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33 | xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
34 | xmlns:ndtp="clr-namespace:Maui.NullableDateTimePicker;assembly=Maui.NullableDateTimePicker"
35 | x:Class="Maui.NullableDateTimePicker.Samples.MainPage">
36 |
37 |
38 |
39 | 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.
40 |
41 |
42 | <ndtp:NullableDateTimePicker NullableDateTime="{Binding MyDateTime}" Mode="Date" />
43 |
44 |
45 |
46 |
47 | ### Usage 2: Use direct calendar popup with your own entry and button
48 |
49 | 1- Add your entry and button for datetime in your xaml page (eg. MainPage.xaml)
50 |
51 |
52 | <HorizontalStackLayout HorizontalOptions="Fill" HeightRequest="40">
53 | <Entry x:Name="DateTimeEntry" Text="{Binding MyDateTime, StringFormat='{0:g}'}"
54 | HorizontalOptions="Fill"
55 | VerticalOptions="Fill"
56 | IsReadOnly="True" />
57 | <ImageButton Source="{Binding CalendarIcon}"
58 | Clicked="DateTimePicker_Clicked"
59 | Margin="0"
60 | Padding="2"
61 | WidthRequest="30" />
62 | </HorizontalStackLayout>
63 |
64 |
65 |
66 | 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)
67 |
68 |
69 | private async void DateTimePicker_Clicked(object sender, EventArgs e)
70 | {
71 | INullableDateTimePickerOptions nullableDateTimePickerOptions = new NullableDateTimePickerOptions
72 | {
73 | NullableDateTime = MyDateTime,
74 | Mode = PickerModes.DateTime,
75 | ShowWeekNumbers = true
76 | // .. other calendar options
77 | };
78 |
79 | var result = await NullableDateTimePicker.OpenCalendarAsync(nullableDateTimePickerOptions);
80 | if (result is PopupResult popupResult && popupResult.ButtonResult != PopupButtons.Cancel)
81 | {
82 | MyDateTime = popupResult.NullableDateTime;
83 | // DateTimeEntry.Text = popupResult.NullableDateTime?.ToString("g"); //If you are not using ViewModel
84 | }
85 | }
86 |
87 |
88 |
89 |
90 | More examples, please see the samples project
91 |
92 | # Options
93 | ## DateTimePicker Calendar options
94 | | Option | Description | Default Value |
95 | |--------|-------------|---------|
96 | | NullableDateTime | Gets or sets the nullable date and time value of the control. | null |
97 | | Mode | Specifies the picker mode of the control. Valid values are Date, DateTime, and Time. | Date |
98 | | MinDate | Minimum selectable date of the control. | DateTime.MinValue |
99 | | MaxDate | Maximum selectable date of the control. | DateTime.MaxValue |
100 | | OkButtonText | The text for the OK button. | OK |
101 | | CancelButtonText | The text for the Cancel button. | Cancel |
102 | | ClearButtonText | Gets or sets the text for the Clear button. | Clear |
103 | | ShowClearButton | Clear button can be hidden/shown. If true, the button is displayed. | true |
104 | | HeaderForeColor | Gets or sets the foreground color of the control's header. | White |
105 | | HeaderBackgroundColor | Background color of the calendar's header. | #2b0b98 |
106 | | ForeColor | It is used for the color of texts that cannot be styled in the calendar. | Dark:White, Light:Black |
107 | | BodyBackgroundColor | Background color of the calendar. | White |
108 | | ToolButtonsStyle | Style of the control's tool buttons. | null |
109 | | DayStyle | Style of the days in the calendar. | null |
110 | | SelectedDayStyle | Style of the selected day in the calendar. | null |
111 | | DayNamesStyle | Style of the day names in the calendar. | null |
112 | | OtherMonthDayStyle | Style of the other month days in the calendar. | null |
113 | | DisabledDayStyle | Style of the disabled days in the calendar. | null |
114 | | WeekNumberStyle | Style of the week numbers in the calendar. | null |
115 | | ShowWeekNumbers | Determines whether to display week numbers in the calendar. | false |
116 | | ShowOtherMonthDays | Determines whether to display other month days in the calendar. | true |
117 | | Is12HourFormat | Determines whether to display the am/pm picker for the 12-hour format. | false |
118 | | AutomationId | You can give your own automation id. With this you can access Calendar elements. Example: {Your-AutomationId}_CalendarYearsPicker, {Your-AutomationId}_CalendarOkButton | empty |
119 |
120 |
121 | ## Datetimepicker Input Options (If NullableDateTimePicker is used as ContentView)
122 | | Option | Description | Default Value |
123 | |--------|-------------|---------|
124 | | Format | Specifies the display format for the date or time. | for date: d, for datetime: g, for time: t |
125 | | BackgroundColor | Background color of the datetimepicker control. | White |
126 | | Icon | Imagesource for the icon. | null |
127 | | TextColor | Text color of the entry. | Black |
128 | | FontFamily | Font family of the entry. | Arial |
129 | | FontSize | Font size of the entry. | 14 |
130 | | BorderColor | Border color of the datetimepicker control | none |
131 | | BorderWidth | Border width of the control | 0 |
132 | | CornerRadius | Corner radius of the control | 0 |
133 | | PlaceHolder | Placeholder of the entry | empty |
134 | | PlaceHolderColor | Placeholder color of the entry | Gray |
135 | | HideIcon | Determines whether to show or hide the calendar icon. | false |
136 |
137 |
138 | ## NullableDateTimeChanged Event (If NullableDateTimePicker is used as ContentView)
139 | The NullableDateTimeChanged event is used to indicate when a NullableDateTime value has been changed.
140 | This event is commonly used in programming or software environments and is triggered when the NullableDateTime value is modified.
141 |
142 | 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.
143 |
144 | Below is an example code snippet illustrating the usage of the "NullableDateTimeChanged" event and the "DateTimeChangedEventArgs" argument class:
145 |
146 |
147 | NullableDateTimePicker dateTimePicker = new NullableDateTimePicker();
148 | dateTimePicker.NullableDateTimeChanged += OnNullableDateTimeChanged;
149 |
150 | private static void OnNullableDateTimeChanged(object sender, DateTimeChangedEventArgs e)
151 | {
152 | Console.WriteLine("DateTime changed!");
153 | Console.WriteLine("Old DateTime: " + e.OldDateTime);
154 | Console.WriteLine("New DateTime: " + e.NewDateTime);
155 | }
156 |
157 |
158 |
159 |
160 | > .NET MAUI handler was used in the test project to remove the underline in the original entry.
161 | > Please refer to the MauiProgram.cs file in the sample project.
162 | > For more detailed information about handlers, please check:
163 | > https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/customize?view=net-maui-8.0
164 |
165 |
166 |
167 | # License
168 | The Nullable DateTimePicker control is licensed under the MIT License. See LICENSE file for more information.
169 |
170 | # Contributing
171 | Contributions are welcome!
172 |
173 | # Screenshot
174 | on ios, android, windows
175 |
176 | 
177 |
178 | # Changelog
179 |
180 | ### 2.4.1-preview
181 | - Since CommunityToolkit Popup does not work on modal pages in windows, Mopup-Library is used temporarily in windows. (Thanks @sferhah)
182 |
183 | ### 2.4.0
184 | - Added HideIcon property
185 | - You can access calendar elements by providing your own AutomationId.
186 | - Net 9.0 compatibility
187 | - net7.0 support removed
188 | - Added new version of .NET MAUI Communitytoolkit
189 | - A new select list is created for years and months and the scroll bar is moved to the selected year.
190 |
191 | ### 2.3.1
192 | - Fixed issue: Icons displayed inconsistently
193 |
194 | ### 2.3.0
195 | - Setting TextColor had no effect.
196 | - FontFamily added.
197 | - Fixed am/pm picker issue in windows
198 |
199 | ### 2.2.0
200 | - 12 hour format added (AM/PM picker)
201 | - Time icon fixed
202 | - The calendar can also be opened by clicking on the entry.
203 | - In time picker, only time is shown in the header
204 | - Various improvements.
205 |
206 | ### 2.1.0
207 | - Fixed: Content is already a child of Microsoft.Maui.Controls.ContentPage.
208 | - Fixed: When the months were changed in Windows, the application would hang.
209 |
210 | ### 2.0.0
211 | - Layout adjustments
212 | - Fixed: The months list was opening in Time mode.
213 | - If the months list is open, the year changes with the next/previous button.
214 | - Default height: 40
215 | - Net 8.0 compatibility
216 |
217 | ### 1.2.0
218 | - Months can be quickly selected from the list.
219 | - MinDate and MaxDate validations have been reviewed and revised.
220 | - A border and CornerRadius has been added to the datetimepicker control.
221 |
222 | ### 1.1.1
223 | - The .NET MAUI Communitytoolkit version (6.1.0) was added to the project.
224 | - Updated the week number logic to align with ISO 8601 standards.
225 | - Bug fixed: When going back from the 1st month, the year was also decreased.
226 |
227 | ### 1.1.0
228 | - The calendar popup can be opened directly via the NullableDateTimePicker, so you can use your own entry and button.
229 | - On some screens, week and day numbers were not displayed on the same line.
230 | - Dark theme adjusted
231 | - Various bugs fixed
232 |
233 | ### 1.0.2
234 | - The problem of displaying the default icon in default mode has been fixed.
235 |
236 | - Various improvements.
237 |
238 | ### 1.0.1
239 | - The problem of not setting the margin has been fixed.
240 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sebarslan/Maui.NullableDateTimePicker/5acac06b1c4366c28a434ee59c26bda8afe7baa8/screenshot.png
--------------------------------------------------------------------------------