Bootstrap 5
Date Picker
Flatpickr
Input Date
Snippets Html
Exemples de Date Picker natif HTML5 et Date Picker avancé avec Flatpickr, intégrés en Bootstrap 5.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippets Date Picker Input 01 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
<!-- Flatpickr - Date Picker Personnalisé -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/fr.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
}
.container-custom {
max-width: 1400px;
margin: 0 auto;
}
/* Header */
.header {
text-align: center;
color: white;
margin-bottom: 2rem;
animation: fadeInDown 0.8s ease;
}
.header h1 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Cards */
.card-custom {
background: white;
border-radius: 20px;
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
margin-bottom: 1.5rem;
overflow: hidden;
animation: fadeInUp 0.6s ease;
}
.card-custom:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-header-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1.2rem 1.5rem;
font-weight: 700;
font-size: 1.2rem;
}
.card-body-custom {
padding: 1.5rem;
}
/* Date picker styles */
.date-group {
margin-bottom: 1.5rem;
}
.date-group label {
font-weight: 600;
margin-bottom: 0.5rem;
color: #333;
display: block;
}
.date-group label i {
margin-right: 0.5rem;
color: #667eea;
}
/* Custom input styles */
input[type="date"] {
padding: 0.6rem 1rem;
border: 2px solid #e0e0e0;
border-radius: 12px;
transition: all 0.3s;
font-family: 'Inter', sans-serif;
}
input[type="date"]:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
/* Flatpickr customization */
.flatpickr-input {
background-color: white;
border: 2px solid #e0e0e0;
border-radius: 12px;
padding: 0.6rem 1rem;
font-family: 'Inter', sans-serif;
transition: all 0.3s;
}
.flatpickr-input:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
/* Badge styles */
.badge-example {
background: #f0f0f0;
color: #667eea;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
margin-left: 0.5rem;
}
/* Code block */
.code-block {
background: #f8f9fa;
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
font-size: 0.85rem;
border-left: 4px solid #667eea;
}
.code-block pre {
margin: 0;
font-family: 'Courier New', monospace;
color: #2c3e50;
}
/* Résultat d'affichage */
.result-display {
background: #f8f9fa;
border-radius: 12px;
padding: 1rem;
margin-top: 1rem;
text-align: center;
font-size: 0.9rem;
}
/* Calendar icon */
.calendar-icon {
position: relative;
}
.calendar-icon input {
padding-right: 2.5rem;
}
.calendar-icon i {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #95a5a6;
pointer-events: none;
}
/* Responsive */
@media (max-width: 768px) {
body {
padding: 1rem;
}
.header h1 {
font-size: 1.8rem;
}
.card-body-custom {
padding: 1rem;
}
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<div class="container-custom">
<!-- Header -->
<div class="header">
<h1>
<i class="bi bi-calendar-date"></i>
Date Pickers
</h1>
<p>Exemples de date picker natif HTML5 et date picker personnalisé avec Flatpickr</p>
</div>
<div class="row">
<!-- SECTION 1: Date Picker Natif HTML5 -->
<div class="col-lg-6">
<div class="card-custom">
<div class="card-header-custom">
<i class="bi bi-browser-chrome"></i>
Date Picker Natif HTML5
<span class="badge-example">Natif</span>
</div>
<div class="card-body-custom">
<div class="date-group">
<label>
<i class="bi bi-calendar"></i>
Date simple
</label>
<input type="date" id="nativeDate" class="form-control">
<small class="text-muted">Format: YYYY-MM-DD</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-clock"></i>
Date et Heure (datetime-local)
</label>
<input type="datetime-local" id="nativeDateTime" class="form-control">
<small class="text-muted">Format: YYYY-MM-DDThh:mm</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-week"></i>
Semaine (week)
</label>
<input type="week" id="nativeWeek" class="form-control">
<small class="text-muted">Format: YYYY-Www</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-month"></i>
Mois (month)
</label>
<input type="month" id="nativeMonth" class="form-control">
<small class="text-muted">Format: YYYY-MM</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-clock-history"></i>
Heure (time)
</label>
<input type="time" id="nativeTime" class="form-control">
<small class="text-muted">Format: hh:mm</small>
</div>
<div class="result-display" id="nativeResult">
<i class="bi bi-info-circle"></i>
Sélectionnez une date pour voir le résultat
</div>
</div>
</div>
<div class="card-custom">
<div class="card-header-custom">
<i class="bi bi-sliders2"></i>
Attributs Spéciaux
<span class="badge-example">Contrôles</span>
</div>
<div class="card-body-custom">
<div class="date-group">
<label>
<i class="bi bi-calendar-minus"></i>
Date min et max
</label>
<input type="date" id="dateMinMax" class="form-control"
min="2024-01-01" max="2024-12-31">
<small class="text-muted">Plage: 1 Jan 2024 - 31 Déc 2024</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-plus"></i>
Date avec valeur par défaut
</label>
<input type="date" id="dateDefault" class="form-control" value="2024-06-15">
<small class="text-muted">Valeur par défaut: 15 Juin 2024</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-ban"></i>
Date désactivée (readonly)
</label>
<input type="date" id="dateReadonly" class="form-control"
value="2024-01-01" readonly>
<small class="text-muted">Lecture seule - non modifiable</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-exclamation-triangle"></i>
Champ requis (required)
</label>
<input type="date" id="dateRequired" class="form-control" required>
<small class="text-muted">Champ obligatoire (validation HTML5)</small>
</div>
</div>
</div>
</div>
<!-- SECTION 2: Date Picker Personnalisé (Flatpickr) -->
<div class="col-lg-6">
<div class="card-custom">
<div class="card-header-custom">
<i class="bi bi-stars"></i>
Date Picker Personnalisé (Flatpickr)
<span class="badge-example">Avancé</span>
</div>
<div class="card-body-custom">
<div class="date-group">
<label>
<i class="bi bi-calendar"></i>
Date simple avec Flatpickr
</label>
<input type="text" id="flatpickrDate" class="form-control" placeholder="Sélectionnez une date">
<small class="text-muted">Interface moderne et personnalisable</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-range"></i>
Plage de dates
</label>
<input type="text" id="flatpickrRange" class="form-control" placeholder="Sélectionnez une plage">
<small class="text-muted">Sélectionnez plusieurs dates</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-clock"></i>
Date et Heure
</label>
<input type="text" id="flatpickrDateTime" class="form-control" placeholder="Date et heure">
<small class="text-muted">Avec sélection de l'heure</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-week"></i>
Sélection par semaine
</label>
<input type="text" id="flatpickrWeek" class="form-control" placeholder="Sélectionnez une semaine">
<small class="text-muted">Sélectionnez une semaine entière</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-month"></i>
Sélection par mois
</label>
<input type="text" id="flatpickrMonth" class="form-control" placeholder="Sélectionnez un mois">
<small class="text-muted">Sélectionnez un mois spécifique</small>
</div>
<div class="result-display" id="customResult">
<i class="bi bi-info-circle"></i>
Sélectionnez une date pour voir le résultat
</div>
</div>
</div>
<div class="card-custom">
<div class="card-header-custom">
<i class="bi bi-gear"></i>
Options Avancées Flatpickr
<span class="badge-example">Configuration</span>
</div>
<div class="card-body-custom">
<div class="date-group">
<label>
<i class="bi bi-calendar-x"></i>
Dates désactivées
</label>
<input type="text" id="flatpickrDisabled" class="form-control" placeholder="Dates désactivées">
<small class="text-muted">Weekends et jours fériés désactivés</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calendar-check"></i>
Dates disponibles uniquement
</label>
<input type="text" id="flatpickrEnabled" class="form-control" placeholder="Dates disponibles">
<small class="text-muted">Seulement certains jours disponibles</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-calculator"></i>
Calcul d'âge
</label>
<input type="text" id="flatpickrAge" class="form-control" placeholder="Date de naissance">
<small class="text-muted">Calcule automatiquement l'âge</small>
</div>
<div class="date-group">
<label>
<i class="bi bi-globe"></i>
Format personnalisé
</label>
<input type="text" id="flatpickrFormat" class="form-control" placeholder="Format français">
<small class="text-muted">Format: DD/MM/YYYY</small>
</div>
</div>
</div>
</div>
</div>
<!-- SECTION 3: Comparaison et Utilisation -->
<div class="row">
<div class="col-12">
<div class="card-custom">
<div class="card-header-custom">
<i class="bi bi-code-square"></i>
Code Source et Utilisation
</div>
<div class="card-body-custom">
<ul class="nav nav-tabs mb-3" id="codeTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nativeCode" type="button">
<i class="bi bi-browser-chrome"></i> Date Picker Natif
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#flatpickrCode" type="button">
<i class="bi bi-stars"></i> Flatpickr
</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="nativeCode">
<div class="code-block">
<pre><code><!-- 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"></code></pre>
</div>
</div>
<div class="tab-pane fade" id="flatpickrCode">
<div class="code-block">
<pre><code>// 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"
});</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Initialisation des date pickers natifs
const nativeDate = document.getElementById('nativeDate');
const nativeDateTime = document.getElementById('nativeDateTime');
const nativeWeek = document.getElementById('nativeWeek');
const nativeMonth = document.getElementById('nativeMonth');
const nativeTime = document.getElementById('nativeTime');
const nativeResult = document.getElementById('nativeResult');
function updateNativeResult() {
const date = nativeDate.value;
const datetime = nativeDateTime.value;
const week = nativeWeek.value;
const month = nativeMonth.value;
const time = nativeTime.value;
nativeResult.innerHTML = `
<i class="bi bi-calendar-check"></i>
<strong>Valeurs sélectionnées :</strong><br>
📅 Date: ${date || 'Non sélectionnée'}<br>
📅📅 Date-Heure: ${datetime || 'Non sélectionnée'}<br>
📆 Semaine: ${week || 'Non sélectionnée'}<br>
📆 Mois: ${month || 'Non sélectionné'}<br>
⏰ Heure: ${time || 'Non sélectionnée'}
`;
}
nativeDate.addEventListener('change', updateNativeResult);
nativeDateTime.addEventListener('change', updateNativeResult);
nativeWeek.addEventListener('change', updateNativeResult);
nativeMonth.addEventListener('change', updateNativeResult);
nativeTime.addEventListener('change', updateNativeResult);
// Initialisation des Flatpickr
// Date simple
flatpickr("#flatpickrDate", {
dateFormat: "Y-m-d",
locale: "fr",
onChange: updateFlatpickrResult
});
// Plage de dates
flatpickr("#flatpickrRange", {
mode: "range",
dateFormat: "Y-m-d",
locale: "fr",
onChange: updateFlatpickrResult
});
// Date et heure
flatpickr("#flatpickrDateTime", {
enableTime: true,
dateFormat: "Y-m-d H:i",
locale: "fr",
onChange: updateFlatpickrResult
});
// Sélection par semaine
flatpickr("#flatpickrWeek", {
weekNumbers: true,
dateFormat: "Y-m-d",
locale: "fr",
onChange: function(selectedDates) {
if (selectedDates.length > 0) {
const date = selectedDates[0];
const weekNumber = getWeekNumber(date);
document.getElementById('customResult').innerHTML = `
<i class="bi bi-calendar-week"></i>
Semaine ${weekNumber} de l'année ${date.getFullYear()}
`;
}
}
});
// Sélection par mois
flatpickr("#flatpickrMonth", {
plugins: [new monthSelectPlugin({
shorthand: true,
dateFormat: "Y-m",
altFormat: "F Y"
})],
dateFormat: "Y-m",
locale: "fr",
onChange: updateFlatpickrResult
});
// Dates désactivées (weekends)
flatpickr("#flatpickrDisabled", {
disable: [
function(date) {
// Désactive les weekends
return date.getDay() === 0 || date.getDay() === 6;
}
],
locale: "fr",
onChange: updateFlatpickrResult
});
// Dates disponibles uniquement
flatpickr("#flatpickrEnabled", {
enable: [
"2024-01-15",
"2024-01-20",
"2024-01-25",
"2024-01-30"
],
locale: "fr",
onChange: updateFlatpickrResult
});
// Calcul d'âge
flatpickr("#flatpickrAge", {
maxDate: "today",
dateFormat: "Y-m-d",
locale: "fr",
onChange: function(selectedDates) {
if (selectedDates.length > 0) {
const birthDate = selectedDates[0];
const age = calculateAge(birthDate);
document.getElementById('customResult').innerHTML = `
<i class="bi bi-calculator"></i>
Âge: ${age} ans (né(e) le ${birthDate.toLocaleDateString('fr-FR')})
`;
}
}
});
// Format personnalisé
flatpickr("#flatpickrFormat", {
dateFormat: "d/m/Y",
locale: "fr",
onChange: updateFlatpickrResult
});
function updateFlatpickrResult(selectedDates) {
const resultDiv = document.getElementById('customResult');
if (selectedDates.length === 0) {
resultDiv.innerHTML = `<i class="bi bi-info-circle"></i> Sélectionnez une date pour voir le résultat`;
return;
}
if (selectedDates.length === 1) {
const date = selectedDates[0];
resultDiv.innerHTML = `
<i class="bi bi-calendar-check"></i>
Date sélectionnée: <strong>${date.toLocaleDateString('fr-FR', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
})}</strong>
`;
} else if (selectedDates.length === 2) {
const start = selectedDates[0];
const end = selectedDates[1];
const diffDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
resultDiv.innerHTML = `
<i class="bi bi-calendar-range"></i>
Du <strong>${start.toLocaleDateString('fr-FR')}</strong> au <strong>${end.toLocaleDateString('fr-FR')}</strong><br>
Durée: <strong>${diffDays} jours</strong>
`;
}
}
// Fonctions utilitaires
function getWeekNumber(date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
const dayNum = d.getUTCDay() || 7;
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
}
function calculateAge(birthDate) {
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
// Plugin monthSelect pour Flatpickr (simplifié)
function monthSelectPlugin(pluginConfig) {
return function(fp) {
return {
onReady() {
// Configuration simplifiée pour la sélection par mois
fp.config.dateFormat = pluginConfig.dateFormat || "Y-m";
fp.config.altFormat = pluginConfig.altFormat || "F Y";
}
};
};
}
// Initialiser les résultats par défaut
updateNativeResult();
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur