[dev-v5] Convert the Calendar and DatePicker components to a generic type (#4153)

* Refactor FluentCalendar components to support generic TValue type for enhanced flexibility

* Refactoring CalendarTValue convert methods

* Refacroring to extension methods

* Refactored `FluentCalendar.razor.cs` to use generic type `TValue` for selected dates, improving type safety and flexibility.

* Converted `PickerDay`, `PickerMonth`, and `PickerYear` to nullable types in `CalendarDefault.razor`.

* Refactor calendar components for nullable date handling

Updated calendar components to support nullable DateTime values and generic date representations. Key changes include:
- Modified `DisabledDate` methods to accept `DateTime?`.
- Changed `SelectedDay` in `CalendarSelection.razor` to a non-nullable `DateTime`.
- Updated `DisabledDateFunc` in `FluentCalendarBase.cs` to use a generic type `TValue`.
- Refactored `OnSelectedDateHandlerAsync` to accept `TValue`.
- Implemented conversions to `TValue` in various methods for consistency.
- Enhanced `PickerMonthChanged` to handle nullable month values in `FluentDatePicker.razor`.
- Streamlined `OnSelectedDateAsync` to directly use `TValue`.

These changes improve the flexibility and robustness of the calendar components.

* Fix Unit Tests

* Refactoring

* Refactoring

* Remove "where TValue : struct, IComparable"

* Update example

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* Refactoring

* refactoring and add CalendarTypes example

* Refactoring

* Refactoring

* Refactoring

* Fix Unit Tests

* add comments

* Rename IsNull to IsNullOrDefault and update usage

* Add Unit Tests

* Refactoring

* Fix some Unit Tests

* Fix Unit Tests

* Update Unit Tests

* Update parsing logic to handle invalid date inputs and adjust validation error messaging

* Update Demo

* Update doc

* Add TValue Unit Tests

* Add Unit Tests

---------

Co-authored-by: Vincent Baaij <[email protected]>

Author: dvoituron

.editorconfig

@@ -307,7 +307,7 @@ dotnet_diagnostic.IDE0029.severity = warning
 dotnet_diagnostic.IDE0030.severity = warning
 
 # IDE0031: Use null propagation
-dotnet_diagnostic.IDE0031.severity = warning
+dotnet_diagnostic.IDE0031.severity = none
 
 # IDE0035: Remove unreachable code
 dotnet_diagnostic.IDE0035.severity = warning

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/Calendar/Examples/CalendarCulture.razor

@@ -1,4 +1,4 @@
-@using System.Globalization
+@using System.Globalization
 
 <FluentStack Wrap="true" HorizontalGap="64px">
 
@@ -27,3 +27,4 @@
                                                    .ToArray();
     private CultureInfo SelectedCulture = new CultureInfo("fa");
 }
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/Calendar/Examples/CalendarDayCustomized.razor

@@ -1,4 +1,4 @@
-<FluentCalendar DisabledDateFunc="@DisabledDate" @bind-Value="@SelectedValue">
+<FluentCalendar DisabledDateFunc="@DisabledDate" @bind-Value="@SelectedValue">
     <DaysTemplate>
         @if (!context.IsInactive &&
                 (context.Date.Day == 5 || context.Date.Day == 15))
@@ -14,16 +14,17 @@
     </DaysTemplate>
 </FluentCalendar>
 
-<p>Selected date @(SelectedValue?.ToString("yyyy-MM-dd"))</p>
+<p>Selected date @(SelectedValue.ToString("yyyy-MM-dd"))</p>
 
 @code
 {
-    private DateTime? SelectedValue = null;
+    private DateOnly SelectedValue = DateOnly.FromDateTime(DateTime.Today);
 
-    private bool DisabledDate(DateTime date)
+    private bool DisabledDate(DateOnly date)
     {
         return (date.Day == 3 ||
                 date.Day == 8 ||
                 date.Day == 20);
     }
 }
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/Calendar/Examples/CalendarDefault.razor

@@ -1,11 +1,11 @@
-<FluentStack Wrap="true" HorizontalGap="24px">
+<FluentStack Wrap="true" HorizontalGap="24px">
 
     <div>
         <FluentCalendar DisabledDateFunc="@DisabledDay"
                         @bind-Value="@SelectedDay"
                         @bind-PickerMonth="@PickerDay"
                         Style="height: 250px; align-content: start;" />
-        <p>Selected @(SelectedDay?.ToString("yyyy-MM-dd"))</p>
+        <p>Selected @(SelectedDay.ToString("yyyy-MM-dd"))</p>
         <p>Panel @(PickerDay.ToString("yyyy-MM-dd"))</p>
     </div>
 
@@ -15,7 +15,7 @@
                         @bind-Value="@SelectedMonth"
                         @bind-PickerMonth="@PickerMonth"
                         Style="height: 250px; align-content: start;" />
-        <p>Selected @(SelectedMonth?.ToString("yyyy-MM-dd"))</p>
+        <p>Selected @(SelectedMonth.ToString("yyyy-MM-dd"))</p>
         <p>Panel @(PickerMonth.ToString("yyyy-MM-dd"))</p>
     </div>
 
@@ -25,19 +25,22 @@
                         @bind-Value="@SelectedYear"
                         @bind-PickerMonth="@PickerYear"
                         Style="height: 250px; align-content: start;" />
-        <p>Selected @(SelectedYear?.ToString("yyyy-MM-dd"))</p>
+        <p>Selected @(SelectedYear.ToString("yyyy-MM-dd"))</p>
         <p>Panel @(PickerYear.ToString("yyyy-MM-dd"))</p>
     </div>
 </FluentStack>
 
 @code
 {
-    private DateTime? SelectedDay = null;
-    private DateTime PickerDay = DateTime.Today;
-    private DateTime? SelectedMonth = null;
-    private DateTime PickerMonth = DateTime.Today;
-    private DateTime? SelectedYear = null;
-    private DateTime PickerYear = DateTime.Today;
+    private static readonly DateTime Today = DateTime.Today;
+    private static readonly DateTime StartOfMonth = new DateTime(Today.Year, Today.Month, 1);
+
+    private DateTime SelectedDay = Today;
+    private DateTime PickerDay = StartOfMonth;
+    private DateTime SelectedMonth = Today;
+    private DateTime PickerMonth = StartOfMonth;
+    private DateTime SelectedYear = Today;
+    private DateTime PickerYear = StartOfMonth;
 
     private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20;
     private bool DisableMonth(DateTime date) => date.Month == 3 || date.Month == 8;

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/Calendar/Examples/CalendarSelection.razor

@@ -4,7 +4,7 @@
     @* SelectMode: Single *@
     <div>
         <FluentCalendar Label="Single"
-                        DisabledDateFunc="@DisabledDay"
+                        DisabledDateFunc="@DisabledNullableDay"
                         DisplayToday="false"
                         @bind-Value="@SelectedDay"
                         SelectMode="CalendarSelectMode.Single" />
@@ -69,6 +69,7 @@
 
     // Disable all days with the day number 3, 8, and 20.
     private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20;
+    private bool DisabledNullableDay(DateTime? date) => date.HasValue && DisabledDay(date.Value);
 
     // Always select the full week, containing the "clicked" day.
     private IEnumerable<DateTime> SelectOneWeek(DateTime date)

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/Calendar/Examples/CalendarTypes.razor

@@ -0,0 +1,14 @@
+<FluentStack Wrap="true" HorizontalGap="24px">
+    <FluentDatePicker Label="DateTime?" @bind-Value="@NullableDateTime" Width="140px" />
+    <FluentDatePicker Label="DateTime" @bind-Value="@DateTime" Width="140px" />
+    <FluentDatePicker Label="DateOnly?" @bind-Value="@NullableDateOnly" Width="140px" />
+    <FluentDatePicker Label="DateOnly" @bind-Value="@DateOnly" Width="140px" />
+</FluentStack>
+
+@code
+{
+    private DateTime? NullableDateTime;
+    private DateTime DateTime = DateTime.Today;
+    private DateOnly? NullableDateOnly;
+    private DateOnly DateOnly = DateOnly.FromDateTime(DateTime.Today);
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/Calendar/FluentCalendar.md

@@ -47,7 +47,14 @@ Example: `Culture="@(new CultureInfo("fr"))"` will display the calendar in Frenc
 
 {{ CalendarCulture }}
 
+## Value type
+
+The **FluentCalendar** and **FluentDatePicker** components are a generic components, so you can use it with date types such as `DateTime?`, `DateTime`, `DateOnly?` or `DateOnly`.  
+Blazor will automatically infer the type based on the value you provide to the `Value` or `SelectedDates` parameters.  
+You can also explicitly set the type using the generic type parameter: `TValue` (i.e. `TValue="DateOnly?"`).
+
+{{ CalendarTypes }}
 
 ## API FluentCalendar
 
-{{ API Type=FluentCalendar }}
+{{ API Type=FluentCalendar<DateTime> }}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/DatePicker/Examples/DatePickerCulture.razor

@@ -1,4 +1,4 @@
-@using System.Globalization
+@using System.Globalization
 
 <FluentStack Wrap="true" HorizontalGap="64px">
 
@@ -26,3 +26,4 @@
                                                    .ToArray();
     private CultureInfo SelectedCulture = new CultureInfo("fa");
 }
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/DatePicker/Examples/DatePickerDefault.razor

@@ -1,4 +1,4 @@
-<div>
+<div>
     <b>Selected Date:</b> @(SelectedValue?.ToString("yyyy-MM-dd"))
 </div>
 

examples/Demo/FluentUI.Demo.Client/Documentation/Components/DateTime/DatePicker/Examples/DatePickerDoubleClickToDate.razor

@@ -1,6 +1,8 @@
+
 <FluentDatePicker @bind-Value="@SelectedValue"
                   DoubleClickToDate="@DateTime.Today" />
 @code
 {
     DateTime? SelectedValue = DateTime.Today.AddDays(-2);
 }
+