DSFR v1.15.4

Retour

Bloc fonctionnel de date unique (date)

Le champ de saisie de date fixe reprend trois champs de saisie de texte.

Documentation

Défaut

Date de naissance Indication : texte de description additionnel

<fieldset class="fr-fieldset" id="date-7822" aria-labelledby="date-7822-legend date-7822-messages">
    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="date-7822-legend">
        Date de naissance
        <span class="fr-hint-text">Indication : texte de description additionnel</span>
    </legend>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-7823">
            <label class="fr-label" for="date-7822-bday-day">
                Jour
                <span class="fr-hint-text">Exemple : 14</span>
            </label>
            <input class="fr-input" name="day" autocomplete="bday-day" id="date-7822-bday-day" type="text">
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-7824">
            <label class="fr-label" for="date-7822-bday-month">
                Mois
                <span class="fr-hint-text">Exemple : 12</span>
            </label>
            <input class="fr-input" name="month" autocomplete="bday-month" id="date-7822-bday-month" type="text">
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--inline-grow fr-fieldset__element--year">
        <div class="fr-input-group" id="input-group-7825">
            <label class="fr-label" for="date-7822-bday-year">
                Année
                <span class="fr-hint-text">Exemple : 1984</span>
            </label>
            <input class="fr-input" name="year" autocomplete="bday-year" id="date-7822-bday-year" type="text">
        </div>
    </div>
    <div class="fr-messages-group" id="date-7822-messages" aria-live="polite">
    </div>
</fieldset>

Erreur unitaire

Date de naissance Indication : texte de description additionnel

Le jour est invalide

Le mois est invalide

L’année est invalide

<fieldset class="fr-fieldset fr-fieldset--error" id="date-error-7831" role="group" aria-labelledby="date-error-7831-legend date-error-7831-messages">
    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="date-error-7831-legend">
        Date de naissance
        <span class="fr-hint-text">Indication : texte de description additionnel</span>
    </legend>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-7832">
            <label class="fr-label" for="date-error-7831-bday-day">
                Jour
                <span class="fr-hint-text">Exemple : 14</span>
            </label>
            <input class="fr-input" name="day" value="00" autocomplete="bday-day" id="date-error-7831-bday-day" type="text">
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-7833">
            <label class="fr-label" for="date-error-7831-bday-month">
                Mois
                <span class="fr-hint-text">Exemple : 12</span>
            </label>
            <input class="fr-input" name="month" value="13" autocomplete="bday-month" id="date-error-7831-bday-month" type="text">
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--inline-grow fr-fieldset__element--year">
        <div class="fr-input-group" id="input-group-7834">
            <label class="fr-label" for="date-error-7831-bday-year">
                Année
                <span class="fr-hint-text">Exemple : 1984</span>
            </label>
            <input class="fr-input" name="year" value="1995e" autocomplete="bday-year" id="date-error-7831-bday-year" type="text">
        </div>
    </div>
    <div class="fr-messages-group" id="date-error-7831-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="date-error-7831-message-error-1">Le jour est invalide</p>
        <p class="fr-message fr-message--error" id="date-error-7831-message-error-2">Le mois est invalide</p>
        <p class="fr-message fr-message--error" id="date-error-7831-message-error-3">L’année est invalide</p>
    </div>
</fieldset>

Erreur globale

Date de naissance Indication : texte de description additionnel

La date est postérieure à aujourd’hui

<fieldset class="fr-fieldset fr-fieldset--error" id="date-error-7840" role="group" aria-labelledby="date-error-7840-legend date-error-7840-messages">
    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="date-error-7840-legend">
        Date de naissance
        <span class="fr-hint-text">Indication : texte de description additionnel</span>
    </legend>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-7841">
            <label class="fr-label" for="date-error-7840-bday-day">
                Jour
                <span class="fr-hint-text">Exemple : 14</span>
            </label>
            <input class="fr-input" name="day" value="03" autocomplete="bday-day" id="date-error-7840-bday-day" type="text">
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-7842">
            <label class="fr-label" for="date-error-7840-bday-month">
                Mois
                <span class="fr-hint-text">Exemple : 12</span>
            </label>
            <input class="fr-input" name="month" value="03" autocomplete="bday-month" id="date-error-7840-bday-month" type="text">
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--inline-grow fr-fieldset__element--year">
        <div class="fr-input-group" id="input-group-7843">
            <label class="fr-label" for="date-error-7840-bday-year">
                Année
                <span class="fr-hint-text">Exemple : 1984</span>
            </label>
            <input class="fr-input" name="year" value="2525" autocomplete="bday-year" id="date-error-7840-bday-year" type="text">
        </div>
    </div>
    <div class="fr-messages-group" id="date-error-7840-messages" aria-live="polite">
        <p class="fr-message fr-message--error" id="date-error-7840-message-error">La date est postérieure à aujourd’hui</p>
    </div>
</fieldset>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.