TimeField

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="time-field-limits" OnValidSubmit="Save" MaxWidth="20.Rem" Grow>
    <TimeField @bind-Value="Model!.Opens" Hint="Doors open in the morning." />
    <TimeField @bind-Value="Model!.Closes" Min="Model!.Opens" />
    <TimeField @bind-Value="Model!.Night" Label="Night shift starts" Min="new TimeOnly(22, 0)" Max="new TimeOnly(6, 0)" Hint="Between 10 PM and 6 AM." />
    <Row><Button Submit>Save hours</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Saved: open @saved.Opens.ToString("HH:mm") to @(saved.Closes?.ToString("HH:mm") ?? "late"), night shift from @(saved.Night?.ToString("HH:mm") ?? "no one").</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "time-field-limits")]
    private Hours? Model { get; set; }

    // What was saved, not the fields: on an interactive page they follow typing.
    private (TimeOnly Opens, TimeOnly? Closes, TimeOnly? Night)? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = (Model!.Opens!.Value, Model.Closes, Model.Night);

    public sealed class Hours
    {
        [Required, Range(typeof(TimeOnly), "06:00", "12:00", ErrorMessage = "Pick a time between 6 AM and noon.")]
        public TimeOnly? Opens { get; set; } = new TimeOnly(9, 0);

        public TimeOnly? Closes { get; set; }

        public TimeOnly? Night { get; set; }
    }
}

<Form Model="Model" FormName="time-field-slots" OnValidSubmit="Save" MaxWidth="20.Rem" Grow>
    <TimeField @bind-Value="Model!.Visit" Min="new TimeOnly(9, 0)" Max="new TimeOnly(17, 0)" Step="TimeSpan.FromMinutes(15)" TimeDisabled="AtLunch" Clearable Hint="Every 15 minutes, 9 to 5, with no visits over lunch." />
    <Row><Button Submit>Book the visit</Button></Row>
    @if (_saved is { } saved)
    {
        <Alert Status="Status.Success">Booked for @saved.ToString("HH:mm").</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "time-field-slots")]
    private Booking? Model { get; set; }

    // What was saved, not the field: on an interactive page it follows typing.
    private TimeOnly? _saved;

    protected override void OnInitialized() => Model ??= new();

    private static bool AtLunch(TimeOnly time) => time.Hour == 12;

    private void Save() => _saved = Model!.Visit;

    public sealed class Booking
    {
        public TimeOnly? Visit { get; set; } = new TimeOnly(10, 30);
    }
}

<Form Model="Model" FormName="time-field-states" MaxWidth="20.Rem" Grow>
    <TimeField @bind-Value="Model!.Quarter" Label="Quarter hours" Step="TimeSpan.FromMinutes(15)" />
    <TimeField @bind-Value="Model!.Seconds" Label="With seconds" Step="TimeSpan.FromSeconds(1)" />
    <TimeField @bind-Value="Model!.Small" Label="Small" Size="ControlSize.Sm" />
    <TimeField @bind-Value="Model!.Large" Label="Large" Size="ControlSize.Lg" />
    <TimeField @bind-Value="Model!.Signed" Label="Signed at" ReadOnly Hint="Read-only: posted, but can't be changed." />
    <TimeField @bind-Value="Model!.Renews" Label="Renews at" Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "time-field-states")]
    private Contract? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Contract
    {
        public TimeOnly Quarter { get; set; } = new(9, 15);
        public TimeOnly Seconds { get; set; } = new(9, 15, 30);
        public TimeOnly Small { get; set; } = new(9, 0);
        public TimeOnly Large { get; set; } = new(9, 0);
        public TimeOnly Signed { get; set; } = new(16, 30);
        public TimeOnly Renews { get; set; } = new(0, 0);
    }
}