canvasManagement/Management.Web/Shared/Components/TimePicker.razor

@inject CoursePlanner planner

@code {
  [Parameter]
  [EditorRequired]
  public SimpleTimeOnly Time { get; set; } = default!;

  [Parameter]
  [EditorRequired]
  public Action<SimpleTimeOnly> UpdateTime { get; set; }= default!;
  protected override void OnInitialized()
  {
    planner.StateHasChanged += reload;
  }
  private void reload()
  {
    this.InvokeAsync(this.StateHasChanged);
  }
  public void Dispose()
  {
    planner.StateHasChanged -= reload;
  }

  private string AmPm
  {
    get => Time.Hour < 12 ? "AM" : "PM";
  }

  private int AdjustedHour
  {
    get 
    {
      var time = Time.Hour % 12;
      if (time == 0) return 12;
      return time;
    }
  }

  private int convertTo24Hour(int hour, string? amPm)
  {
    if(amPm == "AM")
    {
      return hour % 12;
    }
    else 
    {
      if (hour == 12)
        return 12;
      else 
        return hour + 12;
    }
  }
}
<div>
<select 
  @onchange="async (e) => 
    UpdateTime(
      new SimpleTimeOnly
      {
        Hour=convertTo24Hour(Convert.ToInt32(e.Value), AmPm),
        Minute=Time.Minute
      }
    )" 
  class="form-control w-auto d-inline"
>
  <option 
    value="12" 
    selected="@(12 == AdjustedHour)"
  >
    12
  </option>
  @foreach (var hour in Enumerable.Range(1, 11))
  {
    <option 
      value="@hour"
      selected="@(hour == AdjustedHour)"
    >
      @hour.ToString("00")
    </option>
  }
</select>
<span class="pl-0">:</span>
<select 
  @onchange="async (e) => 
    UpdateTime(
      new SimpleTimeOnly
      {
        Hour=Time.Hour,
        Minute=Convert.ToInt32(e.Value)
      }
    )"
  class="form-control w-auto d-inline"
>
  @foreach (var minute in new int[] {0, 15, 30, 45, 59})
  {
    <option 
      value="@minute" 
      selected="@(minute == Time.Minute)"
    >
      @(minute.ToString("00"))
    </option>
  }
</select>

<select 
  @onchange="(e) => 
    UpdateTime(
      new SimpleTimeOnly
      {
        Hour=convertTo24Hour(Time.Hour, e.Value?.ToString()),
        Minute=Time.Minute
      }
    )"
  class="form-control w-auto d-inline"
>
  @foreach (var amPm in new string[] {"AM", "PM"})
  {
    <option 
      value="@amPm" 
      selected="@(amPm == AmPm)"
    >
      @amPm
    </option>
  }
</select>
</div>