[TimePicker] Fix the Time format when another culture is used, add TimeDisplay enum

examples/Demo/Shared/Pages/DateTimes/Examples/TimePickerDefault.razor

@@ -1,7 +1,9 @@
-<FluentTimePicker @bind-Value="@SelectedValue" Label="Meeting time:" />
-<p>Selected Time: @(SelectedValue?.ToString("HH:mm"))</p>
+<FluentTimePicker @bind-Value="@SelectedValue" Label="Meeting time:" />
+<FluentTimePicker @bind-Value="@SelectedValue" Label="With seconds:" TimeDisplay="@TimeDisplay.HourMinuteSeconds" />
+
+<p>Selected Time: @(SelectedValue?.ToString("HH:mm:ss"))</p>
 
 @code
 {
     private DateTime? SelectedValue = null;
-}
+}

src/Core/Components/DateTime/FluentTimePicker.razor

@@ -7,7 +7,7 @@
                    autofocus="@Autofocus"
                    appearance="@Appearance.ToAttributeValue()"
                    type="time"
-                   current-value="@Value?.ToString("HH:mm")"
+                   current-value="@CurrentValueAsString"
                    @onchange="@ChangeHandlerAsync"
                    @oninput="@InputHandlerAsync"
                    readonly="@ReadOnly"

src/Core/Components/DateTime/FluentTimePicker.razor.cs

@@ -3,13 +3,29 @@
 // ------------------------------------------------------------------------
 
 using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
 using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Extensions;
 using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+using Microsoft.JSInterop;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public partial class FluentTimePicker : FluentInputBase<DateTime?>
 {
+    private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/DateTime/FluentTimePicker.razor.js";
+
+    /// <summary />
+    [Inject]
+    private LibraryConfiguration LibraryConfiguration { get; set; } = default!;
+
+    /// <summary />
+    [Inject]
+    private IJSRuntime JSRuntime { get; set; } = default!;
+
+    /// <summary />
+    private IJSObjectReference? Module { get; set; }
+
     /// <summary />
     protected override string? StyleValue => new StyleBuilder(Style).Build();
 
@@ -19,16 +35,39 @@ public partial class FluentTimePicker : FluentInputBase<DateTime?>
     [Parameter]
     public virtual FluentInputAppearance Appearance { get; set; } = FluentInputAppearance.Outline;
 
+    /// <summary>
+    /// Gets or sets the time format.
+    /// </summary>
+    [Parameter]
+    public TimeDisplay TimeDisplay { get; set; } = TimeDisplay.HourMinute;
+
+    /// <summary />
+    protected override string? FormatValueAsString(DateTime? value)
+    {
+        var format = TimeDisplay switch
+        {
+            TimeDisplay.HourMinute => "HH:mm",
+            TimeDisplay.HourMinuteSeconds => "HH:mm:ss",
+            _ => "HH:mm",
+        };
+
+        var result = value?.ToString(format, CultureInfo.InvariantCulture);
+
+        return result;
+    }
+
     /// <summary />
     protected override bool TryParseValueFromString(string? value, out DateTime? result, [NotNullWhen(false)] out string? validationErrorMessage)
     {
+        var acceptedFormats = new string[] { "HH:mm", "HH:mm:ss", "HH:mm:ss.fff" };
+
         DateTime currentValue = Value ?? DateTime.MinValue;
 
         if (string.IsNullOrWhiteSpace(value))
         {
             result = null;
         }
-        else if (value != null && DateTime.TryParse(value, out var valueConverted))
+        else if (DateTime.TryParseExact(value, acceptedFormats, CultureInfo.InvariantCulture, DateTimeStyles.None, out var valueConverted))
         {
             result = currentValue.Date + valueConverted.TimeOfDay;
         }
@@ -40,4 +79,23 @@ protected override bool TryParseValueFromString(string? value, out DateTime? res
         validationErrorMessage = null;
         return true;
     }
+
+    /// <summary />
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(Id) && TimeDisplay == TimeDisplay.HourMinuteSeconds)
+        {
+            Id = Identifier.NewId();
+        }
+    }
+
+    /// <summary />
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && TimeDisplay == TimeDisplay.HourMinuteSeconds)
+        {
+            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+            await Module.InvokeVoidAsync("setControlAttribute", Id, "step", 1);
+        }
+    }
 }

src/Core/Components/DateTime/FluentTimePicker.razor.js

@@ -0,0 +1,7 @@
+export function setControlAttribute(id, attrName, value) {
+    const fieldElement = document.getElementById(id)?.shadowRoot?.querySelector(".control");
+
+    if (!!fieldElement) {
+        fieldElement?.setAttribute(attrName, value);
+    }
+}

src/Core/Enums/TimeDisplay.cs

@@ -0,0 +1,22 @@
+// ------------------------------------------------------------------------
+// This file is licensed to you under the MIT License.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <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 TimeDisplay
+{
+    /// <summary>
+    /// Show hours and minutes
+    /// </summary>
+    HourMinute,
+
+    /// <summary>
+    /// Show hours, minutes and seconds
+    /// </summary>
+    HourMinuteSeconds,
+}