fix: Format in FluentTimePicker

[davhdavh]

🐛 Bug Report

It seems that FluentTimePicker uses the current culture to format the input.value, but the time input spec requires a very specific format: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-time-string

💻 Repro or Code Sample

e.g. in Firefox desktop: Set browser to en_US, set blazor culture to da_DK. Every time time you change time there is a browser warning that xx.xx is not a valid time, and the display remains "--:--"

The specified value "11.48" does not conform to the required format.  The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.

Chrome/Edge requires you to change the OS lang.

💁 Possible Solution

Force FormatValueAsString and TryParseValueFromString to always use HH:mm as per spec. And update current-value to use FormatValueAsString

[davhdavh]

Browsers also use the format as a hint on the input type, so I suggest you add a enum:

   /// <summary>
   /// See <see cref="FluentTimeDisplay"/>.
   /// </summary>
   [Parameter]
   public FluentTimeDisplay TimeDisplay { get; set; } = FluentTimeDisplay.HourMinute;

   /// <inheritdoc />
   protected override string? FormatValueAsString(DateTime? value) =>
      value?.ToString(TimeDisplay switch {
         FluentTimeDisplay.HourMinute =>  "HH\\:mm",
         FluentTimeDisplay.HourMinuteSeconds =>  "HH\\:mm\\:ss",
         FluentTimeDisplay.HourMinuteSecondsMilliSecond =>  "HH\\:mm\\:ss.fff",
         _ => throw new UnreachableException(),
      });

   /// <summary />
   protected override bool TryParseValueFromString(string? value, out DateTime? result, [NotNullWhen(false)] out string? validationErrorMessage)
   {
/*...*/
      else if (DateTime.TryParseExact(value, [
                  "HH\\:mm",
                  "HH\\:mm\\:ss",
                  "HH\\:mm\\:ss.fff",
                ], CultureInfo.InvariantCulture, DateTimeStyles.None, out var valueConverted))
/*...*/
   }
/*...*/

/// <summary>
/// Specifies the format for displaying time in input elements with time component. This is a hint to the browser, so results may vary.
/// </summary>
public enum FluentTimeDisplay
{
   /// <summary>
   /// Show hours and minutes
   /// </summary>
   HourMinute,
   /// <summary>
   /// Show hours, minutes and seconds
   /// </summary>
   HourMinuteSeconds,
   /// <summary>
   /// Show hours, minutes, seconds and milliseconds
   /// </summary>
   HourMinuteSecondsMilliSecond,
}

[dvoituron]

I've added an enum to display seconds (I don't think it's possible to display milliseconds).

#3961

[MarvinKlein1508]

@dvoituron in vanilla HTML it is possible but I think not all browsers support it.
https://jsbin.com/giqikelumu/edit?html,output

Not sure though about the web components

[dvoituron]

Not sure though about the web components

Hmm. Interesting. I'll update that in another PR.