Snippets Date Picker Input 01

Date Picker Natif HTML5 Natif

Date simple Format: YYYY-MM-DD

Date et Heure (datetime-local) Format: YYYY-MM-DDThh:mm

Semaine (week) Format: YYYY-Www

Mois (month) Format: YYYY-MM

Heure (time) Format: hh:mm

Sélectionnez une date pour voir le résultat

Attributs Spéciaux Contrôles

Date min et max Plage: 1 Jan 2024 - 31 Déc 2024

Date avec valeur par défaut Valeur par défaut: 15 Juin 2024

Date désactivée (readonly) Lecture seule - non modifiable

Champ requis (required) Champ obligatoire (validation HTML5)

Date Picker Personnalisé (Flatpickr) Avancé

Date simple avec Flatpickr Interface moderne et personnalisable

Plage de dates Sélectionnez plusieurs dates

Date et Heure Avec sélection de l'heure

Sélection par semaine Sélectionnez une semaine entière

Sélection par mois Sélectionnez un mois spécifique

Sélectionnez une date pour voir le résultat

Options Avancées Flatpickr Configuration

Dates désactivées Weekends et jours fériés désactivés

Dates disponibles uniquement Seulement certains jours disponibles

Calcul d'âge Calcule automatiquement l'âge

Format personnalisé Format: DD/MM/YYYY

Code Source et Utilisation

<!-- Date simple -->
<input type="date" id="nativeDate" class="form-control">

<!-- Date et heure -->
<input type="datetime-local" id="nativeDateTime" class="form-control">

<!-- Semaine -->
<input type="week" id="nativeWeek" class="form-control">

<!-- Mois -->
<input type="month" id="nativeMonth" class="form-control">

<!-- Heure -->
<input type="time" id="nativeTime" class="form-control">

<!-- Avec min/max -->
<input type="date" min="2024-01-01" max="2024-12-31">

<!-- Avec valeur par défaut -->
<input type="date" value="2024-06-15">

// Initialisation simple
flatpickr("#flatpickrDate", {
    dateFormat: "Y-m-d",
    locale: "fr"
});

// Plage de dates
flatpickr("#flatpickrRange", {
    mode: "range",
    dateFormat: "Y-m-d",
    locale: "fr"
});

// Date et heure
flatpickr("#flatpickrDateTime", {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
    locale: "fr"
});

// Format personnalisé
flatpickr("#flatpickrFormat", {
    dateFormat: "d/m/Y",
    locale: "fr"
});

// Dates désactivées
flatpickr("#flatpickrDisabled", {
    disable: [
        function(date) {
            return date.getDay() === 0 || date.getDay() === 6;
        }
    ],
    locale: "fr"
});

Date Pickers