FluentDatePicker invalidates a valid date OR fails with Serialization Exception

[Ducki]

🐛 Bug Report

Using FluentDatePicker (no matter whether Interactive Server or WASM) always fails because it doesn't accept the picked date after submit:

When I prepared a minimal reproduction repositry, I got a totally different error:

System.NotSupportedException: Serialization and deserialization of 'System.Type' instances is not supported. Path: $.Type.
       ---> System.NotSupportedException: Serialization and deserialization of 'System.Type' instances is not supported.
         at System.Text.Json.Serialization.Converters.UnsupportedTypeConverter`1.Write(Utf8JsonWriter writer, T value, JsonSerializerOptions options)
         at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
         at System.Text.Json.Serialization.Metadata.JsonPropertyInfo`1.GetMemberAndWriteJson(Object obj, WriteStack& state, Utf8JsonWriter writer)
         at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryWrite(Utf8JsonWriter writer, T value, JsonSerializerOptions options, WriteStack& state)
         at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
         at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
         at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
[…]

💻 Repro or Code Sample

https://github.com/Ducki/FluentUiRepro Relevant location: https://github.com/Ducki/FluentUiRepro/blob/3cf2f781d3007ce053b40bfd958eb4ebc1ce16f0/BlazorWasm/Components/Pages/Home.razor#L10

🤔 Expected Behavior

Submit the hand picked date and accept it as valid, because I picked it with the actual date picker.

😯 Current Behavior

See above.

💁 Possible Solution

🔦 Context

🌍 Your Environment

macOS, .NET 8.0.1 Browser: Firefox and Safari IDE: Rider

[dvoituron]

The problem is in your code (not in the component).

Update the Counter.razor page in the BlazorWasm.Client project, with this code and all will be fine.

1. Add a FormName="MyForm" attribute Rename your Person class to PersonModel to avoid class conflicts.

@page "/counter"
@rendermode InteractiveWebAssembly

<EditForm OnSubmit="Callback2" Model="Person" FormName="MyForm">
    <FluentDatePicker Name="Person.Birthday" @bind-Value="@Person.Birthday"></FluentDatePicker>
    <FluentButton Type="ButtonType.Submit">OK</FluentButton>
</EditForm>

@code
{
    [SupplyParameterFromForm]
    public PersonModel Person { get; set; } = new PersonModel();

    private void Callback2(EditContext obj)
    {
        Console.WriteLine("OK");
        Console.WriteLine(Person.Birthday);
    }

    public class PersonModel
    {
        public DateTime? Birthday { get; set; }
    }
}