LgTimeBox

LgTimeBox<TValue> permet de saisir une heure, au clavier (masque de saisie) ou via une horloge interactive (clock picker). La valeur liée est un DateTime (dont seule la partie horaire est modifiée) ou un TimeSpan — ou leur version nullable.

<LgTimeBox Label="#StartTime" @bind-Value="_model.StartTime" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgInputBase<TValue> → LgAriaComponentBase → LgComponentBase
• Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Saisie simple

Par défaut, l'horloge interactive est affichée au focus et les secondes sont ignorées (format HH:mm). Le Placeholder par défaut est alors « HH:MM ».

ShiftPage.razor

<LgTimeBox Label="#StartTime" @bind-Value="_model.StartTime" />

ShiftPage.razor.cs

public partial class ShiftPage : LgPage
{
    // Modèle édité : TimeSpan? pour une durée / heure du jour sans partie date.
    private readonly ShiftVm _model = new();

    private sealed class ShiftVm
    {
        public TimeSpan? StartTime { get; set; }
    }
}

Saisie des secondes

IgnoreSeconds="false" passe le format à HH:mm:ss. Dans ce mode (comme lorsque ShowClockPicker="false"), l'horloge interactive est remplacée par un masque de saisie clavier.

ChronoPage.razor

<LgTimeBox Label="#PreciseTime"
           IgnoreSeconds="false"
           @bind-Value="_model.PreciseTime" />

@* Saisie au masque uniquement, sans horloge. *@
<LgTimeBox Label="#AlarmTime"
           ShowClockPicker="false"
           @bind-Value="_model.AlarmTime" />

ChronoPage.razor.cs

public partial class ChronoPage : LgPage
{
    private readonly ChronoVm _model = new();

    private sealed class ChronoVm
    {
        public TimeSpan? PreciseTime { get; set; }
        public TimeSpan? AlarmTime { get; set; }
    }
}

Heure d'un DateTime

Lié à un DateTime, le composant ne modifie que la partie horaire : la partie date de la valeur existante est conservée (la date du jour est utilisée si la valeur est vide).

AppointmentPage.razor

<LgDateBox Label="#AppointmentDate" @bind-Value="_model.Appointment" />
<LgTimeBox Label="#AppointmentTime"
           OnChangingAsync="OnTimeChangingAsync"
           @bind-Value="_model.Appointment" />

AppointmentPage.razor.cs

public partial class AppointmentPage : LgPage
{
    private readonly AppointmentVm _model = new();

    // Appelé avant le changement : refuse les rendez-vous hors des heures d'ouverture.
    private Task OnTimeChangingAsync(ChangingEventArgs<DateTime?> args)
    {
        if (args.NewValue is DateTime value && (value.Hour < 8 || value.Hour >= 18))
        {
            args.Cancel = true;
            ShowWarning("#OutsideOpeningHours");
        }
        return Task.CompletedTask;
    }

    private sealed class AppointmentVm
    {
        public DateTime? Appointment { get; set; }
    }
}

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
IgnoreSeconds	bool	true	LgTimeBox	Ignore les secondes (format HH:mm). À false, le format devient HH:mm:ss et l'horloge interactive est remplacée par le masque de saisie.
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	null	LgTimeBox	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
OnFocus	EventCallback<FocusEventArgs>	—	LgTimeBox	Callback appelé à la prise de focus.
Placeholder	string	null	LgTimeBox	Texte indicatif affiché quand le champ est vide (« HH:MM » par défaut quand l'horloge est active et que les secondes sont ignorées).
ShowClockPicker	bool	true	LgTimeBox	Affiche l'horloge interactive au focus (uniquement quand IgnoreSeconds vaut true ; sinon le masque de saisie est utilisé).
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Attributs HTML additionnels appliqués à l'élément rendu.
AutoFocus	bool	false	LgInputBase	Donne le focus au champ lors du premier rendu.
ConfirmationMessage	string	null	LgInputBase	Message de confirmation affiché avant d'appliquer un changement de valeur.
Container	IInputContainer<TValue>	null	LgInputBase	Usage interne : rattache une cellule de GridView au champ.
CssClass	string	null	LgInputBase	Classes CSS additionnelles.
Disabled	bool	false	LgInputBase	Désactive le champ.
DisplayName	string	null	LgInputBase	Nom du champ utilisé dans les messages d'erreur de saisie.
HideValidationMessage	bool	false	LgInputBase	Masque le message de validation sous le champ.
Label	string	null	LgInputBase	Libellé du champ.
LabelContent	RenderFragment	null	LgInputBase	Contenu personnalisé de la zone de libellé.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback appelé après le changement de valeur.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback appelé quand le champ est réinitialisé par le bouton d'effacement.
PolicyEdit	string	null	LgInputBase	Policy requise pour modifier le champ.
PolicyVisible	string	null	LgInputBase	Policy requise pour afficher le champ.
ReadOnly	bool	false	LgInputBase	Affiche le champ en lecture seule.
Required	bool?	null	LgInputBase	Champ obligatoire. Si null, déduit de l'attribut [Required] de la propriété liée.
ResetButton	bool?	null	LgInputBase	Affiche le bouton d'effacement. Si null, la configuration de comportement de l'application s'applique.
ResetText	string	null	LgInputBase	Texte du bouton d'effacement.
ResetTextAriaLabel	string	null	LgInputBase	Libellé accessible (aria-label) du bouton d'effacement.
Tooltip	string	null	LgInputBase	Bulle d'aide.
TooltipIsHtml	bool	false	LgInputBase	Indique si le contenu du Tooltip est au format HTML (sinon texte brut).
Value	TValue	—	LgInputBase	Valeur liée (@bind-Value), de type DateTime(?) ou TimeSpan(?).
ValueChanged	EventCallback<TValue>	—	LgInputBase	Callback de mise à jour de la valeur liée.
ValueExpression	Expression<Func<TValue>>	—	LgInputBase	Expression identifiant la propriété liée.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Paramètres en cascade

LgTimeBox consomme aussi des paramètres fournis automatiquement par des composants ancêtres (vous n'avez pas à les définir) : ParentAuthorizeView (LgAuthorizeView) et le contexte d'édition d'un LgEditForm parent.

Événements

Événement	Type	Description
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	Avant le changement de valeur ; args.Cancel = true annule le changement.
OnChange	EventCallback<ChangeEventArgs>	Après le changement de valeur.
OnFocus	EventCallback<FocusEventArgs>	À la prise de focus du champ.
OnReset	EventCallback<ChangeEventArgs>	À la réinitialisation par le bouton d'effacement.

Bonnes pratiques / accessibilité

• Utilisez TimeSpan? pour une heure « pure » (sans date) ; réservez DateTime aux cas où le même modèle porte la date et l'heure (souvent en binôme avec un LgDateBox lié à la même propriété).
• L'horloge interactive ne gère pas les secondes : IgnoreSeconds="false" bascule automatiquement sur le masque de saisie.

Référence complète

Tous les paramètres (hérités compris) : Référence API — LgTimeBox.

Composants liés

• LgDateBox — sélection d'un jour.
• LgGridTimeColumn — colonne heure d'un LgGridView.