LgDateBox

LgDateBox<TValue> permet de saisir ou de sélectionner un jour via un champ texte doublé d'un calendrier (datepicker). Il est la base de la famille des champs date : LgMonthBox (mois), LgWeekBox (semaine) et, pour un fonctionnement voisin, LgYearBox (année).

<LgDateBox Label="#OrderDate" @bind-Value="_model.OrderDate" />

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

Le type lié TValue doit être DateOnly, DateTime ou DateTimeOffset (ou leur version nullable). Le suffixe du champ est réservé : le composant y place automatiquement l'icône calendrier (Suffix / SuffixType sont écrasés à l'initialisation).

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Saisie simple

La liaison se fait avec @bind-Value. Le format d'affichage par défaut est le format de date court de la culture courante.

OrderEditPage.razor
<LgDateBox Label="#OrderDate" @bind-Value="_model.OrderDate" />

OrderEditPage.razor.cs
public partial class OrderEditPage : LgPage
{
    // Modèle édité : la date est nullable pour autoriser un champ vide.
    private readonly OrderVm _model = new();

    private sealed class OrderVm
    {
        public DateTime? OrderDate { get; set; }
    }
}

Bornes de sélection

Min et Max désactivent les dates hors bornes dans le calendrier et invalident la saisie clavier correspondante.

BookingPage.razor
<LgDateBox Label="#BookingDate"
           Min="_minDate"
           Max="_maxDate"
           @bind-Value="_model.BookingDate" />

BookingPage.razor.cs
public partial class BookingPage : LgPage
{
    // Fenêtre de réservation autorisée : borne le calendrier et la saisie clavier.
    private readonly DateTime _minDate = new(2026, 1, 1);
    private readonly DateTime _maxDate = new(2026, 12, 31);

    private readonly BookingVm _model = new();

    private sealed class BookingVm
    {
        public DateOnly? BookingDate { get; set; }
    }
}

Format d'affichage et saisie clavier

DisplayFormat remplace le format de date court de la culture courante. KeyboardDisabled force le passage par le calendrier (le champ devient readonly côté saisie). AssumeNearbyYear contrôle l'expansion des années à deux chiffres : la saisie « 12/05/28 » devient 2028 tant que l'année reste à moins de AssumeNearbyYear ans dans le futur (20 par défaut ; une valeur inférieure à 1 désactive ce comportement).

ContractPage.razor
<LgDateBox Label="#SignatureDate"
           DisplayFormat="dd/MM/yyyy"
           AssumeNearbyYear="30"
           @bind-Value="_model.SignatureDate" />

@* Sélection uniquement à la souris, dans le calendrier. *@
<LgDateBox Label="#EffectiveDate"
           KeyboardDisabled="true"
           @bind-Value="_model.EffectiveDate" />

ContractPage.razor.cs
public partial class ContractPage : LgPage
{
    private readonly ContractVm _model = new();

    private sealed class ContractVm
    {
        public DateTime? SignatureDate { get; set; }
        public DateTime? EffectiveDate { get; set; }
    }
}

Partie horaire des nouvelles valeurs

Lorsque la valeur liée est un DateTime ou un DateTimeOffset vide, la nouvelle valeur créée à la sélection utilise DefaultTime (minuit par défaut), DefaultDateTimeKind (Unspecified par défaut) et, pour DateTimeOffset, DefaultTimeOffset (décalage du fuseau local par défaut). Si la valeur liée contient déjà une date, seule la partie date est remplacée : l'heure existante est conservée.

MeetingPage.razor
<LgDateBox Label="#MeetingDate"
           DefaultTime="_defaultTime"
           DefaultDateTimeKind="DateTimeKind.Local"
           @bind-Value="_model.MeetingDate" />

MeetingPage.razor.cs
public partial class MeetingPage : LgPage
{
    // Heure affectée aux nouvelles dates : évite de créer des réunions à minuit.
    private readonly TimeOnly _defaultTime = new(9, 0);

    private readonly MeetingVm _model = new();

    private sealed class MeetingVm
    {
        public DateTime? MeetingDate { get; set; }
    }
}

Réagir au changement de valeur

OnChangingAsync est appelé avant l'affectation et permet d'annuler le changement (args.Cancel). OnChange est appelé après. OnFocus notifie la prise de focus (c'est aussi le moment où le calendrier se charge).

PeriodPage.razor
<LgDateBox Label="#StartDate"
           OnChangingAsync="OnStartDateChangingAsync"
           OnChange="OnStartDateChanged"
           @bind-Value="_model.StartDate" />

PeriodPage.razor.cs
public partial class PeriodPage : LgPage
{
    private readonly PeriodVm _model = new();

    // Appelé avant le changement : positionnez args.Cancel pour refuser la nouvelle date
    // (ex. cohérence avec une date de fin déjà saisie).
    private Task OnStartDateChangingAsync(ChangingEventArgs<DateTime?> args)
    {
        if (args.NewValue > _model.EndDate)
        {
            args.Cancel = true;
            ShowWarning("#StartAfterEnd");
        }
        return Task.CompletedTask;
    }

    // Appelé après le changement : utile pour recalculer des données dépendantes.
    private void OnStartDateChanged(ChangeEventArgs args)
    {
        ShowInformation("#PeriodUpdated");
    }

    private sealed class PeriodVm
    {
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
    }
}

Champ obligatoire et bouton d'effacement

Required force le caractère obligatoire (sinon il est déduit de l'attribut [Required] de la propriété liée). ResetButton affiche un bouton d'effacement ; sa valeur par défaut vient de la configuration de comportement de l'application.

DeadlinePage.razor
<LgEditForm Model="_model" OnValidSubmit="OnValidSubmitAsync">
    <LgDateBox Label="#Deadline"
               Required="true"
               ResetButton="true"
               @bind-Value="_model.Deadline" />
    <LgButton Text="#Save" IsSubmit="true" />
</LgEditForm>

DeadlinePage.razor.cs
public partial class DeadlinePage : LgPage
{
    private readonly DeadlineVm _model = new();

    // Déclenché uniquement quand le formulaire est valide : la date est garantie renseignée.
    private async Task OnValidSubmitAsync(EditContext editContext)
    {
        await Task.Delay(100);
        ShowSuccess("#DeadlineSaved");
    }

    private sealed class DeadlineVm
    {
        public DateTime? Deadline { get; set; }
    }
}

Premier jour de la semaine

WeekStart change le premier jour affiché dans le calendrier (lundi par défaut).

PlanningPage.razor
<LgDateBox Label="#PlanningDate"
           WeekStart="DayOfWeek.Sunday"
           @bind-Value="_model.PlanningDate" />

PlanningPage.razor.cs
public partial class PlanningPage : LgPage
{
    private readonly PlanningVm _model = new();

    private sealed class PlanningVm
    {
        public DateOnly? PlanningDate { 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
`AssumeNearbyYear`	`int`	`20`	`LgDateBox`	Nombre d'années dans le futur pendant lesquelles une année saisie sur deux chiffres est rattachée au siècle courant. Une valeur inférieure à 1 désactive ce comportement.
`DefaultDateTimeKind`	`DateTimeKind`	`Unspecified`	`LgDateBox`	`DateTimeKind` utilisé pour créer un nouveau `DateTime`.
`DefaultTime`	`TimeOnly?`	`null`	`LgDateBox`	Heure utilisée pour créer un nouveau `DateTime` ou `DateTimeOffset` (minuit si `null`).
`DefaultTimeOffset`	`TimeSpan?`	`null`	`LgDateBox`	Décalage horaire utilisé pour créer un nouveau `DateTimeOffset` (décalage du fuseau local si `null`).
`DisplayFormat`	`string`	`null`	`LgDateBox`	Format d'affichage de la date (format de date court de la culture courante si `null`).
`KeyboardDisabled`	`bool`	`false`	`LgDateBox`	Interdit la modification au clavier : la valeur ne peut être choisie que dans le calendrier.
`Max`	`DateTime?`	`null`	`LgDateBox`	Date la plus tardive sélectionnable ; les dates ultérieures sont désactivées.
`Min`	`DateTime?`	`null`	`LgDateBox`	Date la plus ancienne sélectionnable ; les dates antérieures sont désactivées.
`OnChangeDisabled`	`bool`	`false`	`LgDateBox`	Désactive l'événement `onchange` DOM au profit de `oninput` (utilisé pour éviter des erreurs quand le contrôle est retiré du rendu).
`OnChangingAsync`	`Func<ChangingEventArgs<TValue>, Task>`	`null`	`LgDateBox`	Callback appelé avant le changement de valeur ; le changement peut y être annulé.
`OnFocus`	`EventCallback<FocusEventArgs>`	—	`LgDateBox`	Callback appelé à la prise de focus.
`Placeholder`	`string`	`null`	`LgDateBox`	Texte indicatif affiché quand le champ est vide.
`WeekStart`	`DayOfWeek`	`Monday`	`LgDateBox`	Premier jour de la semaine dans le calendrier.
`Prefix`	`string`	`null`	`LgInputRenderBase`	Préfixe affiché dans le champ.
`PrefixType`	`InputLabelType`	`Text`	`LgInputRenderBase`	Nature du préfixe.
`Suffix`	`string`	(icône calendrier)	`LgInputRenderBase`	Suffixe affiché dans le champ. Réservé : le composant y place l'icône calendrier.
`SuffixType`	`InputLabelType`	`IconName`	`LgInputRenderBase`	Nature du suffixe. Réservé par le composant.
`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`).
`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

LgDateBox 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.

Énumérations associées

`InputLabelType`

Nature du contenu de Prefix / Suffix.

Valeur	Description
`IconName`	Nom d'une icône de la bibliothèque.
`Text`	Texte simple (valeur par défaut).

Bonnes pratiques / accessibilité

Préférez DateOnly? quand seule la date compte : cela évite les surprises de partie horaire et de fuseau propres à DateTime / DateTimeOffset.
Ne définissez pas Suffix / SuffixType : ils sont écrasés par l'icône calendrier à l'initialisation du composant.
Pour un champ « mois », « semaine » ou « année », utilisez le composant spécialisé plutôt qu'un LgDateBox avec un format personnalisé.

Référence complète

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

Composants liés

LgMonthBox — sélection d'un mois.
LgWeekBox — sélection d'une semaine.
LgYearBox — sélection d'une année.
LgTimeBox — saisie d'une heure.
LgGridDateColumn — colonne date d'un LgGridView.

Utilisation​

Démonstration​

Saisie simple​

Bornes de sélection​

Format d'affichage et saisie clavier​

Partie horaire des nouvelles valeurs​

Réagir au changement de valeur​

Champ obligatoire et bouton d'effacement​

Premier jour de la semaine​

Propriétés​

Événements​

Énumérations associées​

InputLabelType​

Bonnes pratiques / accessibilité​

Composants liés​