FluentDatePicker validation

[pmeems]

I'm trying to add some validation for the FluentDatePicker.
I understand it is not yet fully supported:

The FluentCalendar and FluentDatePicker components are not yet fully compatible with the EditForm and FluentEditForm elements. Some functionalities, such as error messages, the requirement message or the validation messages are missing.

But it is not clear what is supported.
I'm using Microsoft.FluentUI.AspNetCore.Components v4.11.3 with .NET 8

I have this property:

[RegularExpression(@"^(0[1-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$",
    ErrorMessage = "Wrong format")]
public DateOnly? Peildatum { get; set; }

And I use it like this:

<FluentDatePicker Name="Peildatum"
                  Label="Peildatum:"
                  Culture="@(System.Globalization.CultureInfo.GetCultureInfo("nl-NL"))"
                  Value="@FormModel.Peildatum.ToDateTimeNullable()"
                  ValueChanged="@(e => FormModel.Peildatum = e.ToDateOnlyNullable())"/>
<FluentValidationMessage For="@(() => FormModel.Peildatum)"/>

On the page I get the correct date picker. When I click in the inputbox the calender pops up.
This all fine, but I can also type in the inputbox, even text!

I also tried using @onkeydown and @oninput:

<FluentDatePicker Name="Peildatum"
                  Label="Peildatum:"
                  Culture="@(System.Globalization.CultureInfo.GetCultureInfo("nl-NL"))"
                  Value="@FormModel.Peildatum.ToDateTimeNullable()"
                  ValueChanged="@(e => FormModel.Peildatum = e.ToDateOnlyNullable())"
                  @onkeydown="@HandleKeyDownPeildatum"
                  @oninput="@HandleInputChangePeildatum"/>
<FluentValidationMessage For="@(() => FormModel.Peildatum)"/>

private void HandleKeyDownPeildatum(KeyboardEventArgs obj)
{
    _editContext.NotifyFieldChanged(FieldIdentifier.Create(() =>
        FormModel.Peildatum)); // Force field update

    _editContext.NotifyValidationStateChanged();
    UpdateFormValidity();
}
private static void HandleInputChangePeildatum(ChangeEventArgs e)
{
    if (e.Value is null) return;

    // Check if only integers or '-' are in e.Value:
    if ((e.Value.ToString() ?? string.Empty).All(char.IsDigit)
        || e.Value.ToString()!.Contains('-', StringComparison.Ordinal)) return;

    // Invalid input, reset value:
    e.Value = string.Empty;
}

But that didn't work either.

How to prevent this. The user should not be able to type in stuff that is not related to a date.

[dvoituron]

The ability for the user to write whatever he or she wants into a DatePicker is by design.
But if it writes an incorrect date, the component returns to “empty” mode.

At present, it is not possible to set an input mask on this component.