Datepicker en français avec HTML/CSS/JS

Input date natif en français

Le navigateur propose nativement un input <input type="date"> avec un datepicker intégré. La localisation française se configure simplement avec l'attribut lang sur le document ou l'élément :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Datepicker français</title>
</head>
<body>
  <form>
    <label for="birthDate">Date de naissance :</label>
    <input type="date" id="birthDate" name="birthDate"
           required min="1950-01-01" max="2010-12-31">
  </form>
</body>
</html>

L'attribut lang="fr" force la localisation du calendrier en français (jours de la semaine, noms des mois). Les attributs min et max limitent la plage de dates sélectionnables.

À retenir : Input date natif = solution simple, rapide et accessible pour les formulaires basiques, sans librairie externe.

Formatage et affichage de la date

HTML stocke les dates au format ISO (YYYY-MM-DD), mais vous devez souvent les afficher au format français (JJ/MM/AAAA) :

// Récupérer la date et la reformater
const dateInput = document.getElementById('birthDate');
dateInput.addEventListener('change', function() {
  // dateInput.value = "1985-03-15" (format ISO)
  const [year, month, day] = this.value.split('-');
  const dateFormatted = `${day}/${month}/${year}`;
  console.log(`Date sélectionnée : ${dateFormatted}`);
});

// Fonction de formatage réutilisable
function formatDateFR(isoDate) {
  const [year, month, day] = isoDate.split('-');
  return `${day}/${month}/${year}`;
}

// Utilisation
console.log(formatDateFR('2026-04-24')); // "24/04/2026"

Pour précharger une valeur au format français, il faut la convertir :

// Convertir du format français au format ISO
function parseDate FR(frDate) {
  const [day, month, year] = frDate.split('/');
  return `${year}-${month}-${day}`;
}

// Précharger avec une date française
const isoDate = parseDateFR('24/04/1990');
document.getElementById('birthDate').value = isoDate;

Flatpickr : solution complète

Flatpickr est une librairie légère (moins de 5KB gzippée) qui offre une expérience complète de datepicker avec support multilingue natif :

<!-- CDN Flatpickr -->
<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>

<input type="text" id="datepickerFr" placeholder="Sélectionnez une date">

<script>
  // Initialiser Flatpickr avec locale FR
  flatpickr('#datepickerFr', {
    locale: 'fr',           // Localisation française
    dateFormat: 'd/m/Y',    // Format JJ/MM/AAAA
    allowInput: true,       // Autoriser la saisie manuelle
    minDate: '2020-01-01',  // Date minimale
    maxDate: 'today',       // Jusqu'à aujourd'hui
    enableTime: false,      // Sans heure
    monthSelectorType: 'dropdown' // Sélecteur mois en dropdown
  });
</script>

Avantages de Flatpickr :

✅ Locale française intégrée (mois, jours, messages)
✅ Très léger et performant
✅ Saisie manuelle + datepicker combinés
✅ Entièrement stylisable en CSS
✅ Pas de dépendances jQuery

Datepicker personnalisée

Pour un contrôle total du design, créez une datepicker personnalisée en HTML, CSS et JavaScript :

<!-- HTML -->
<div class="datepicker-wrapper">
  <input type="text" id="dateInput" placeholder="JJ/MM/AAAA">
  <button type="button" id="toggleCalendar">📅</button>
  <div id="calendar" class="calendar-popup" hidden>
    <div class="calendar-header">
      <button type="button" id="prevMonth">❮</button>
      <span id="monthYear"></span>
      <button type="button" id="nextMonth">❯</button>
    </div>
    <div class="calendar-grid">
      <!-- Jours de la semaine -->
      <div class="weekday">Lun</div>
      <div class="weekday">Mar</div>
      <div class="weekday">Mer</div>
      <div class="weekday">Jeu</div>
      <div class="weekday">Ven</div>
      <div class="weekday">Sam</div>
      <div class="weekday">Dim</div>
      <!-- Jours du mois généré en JS -->
    </div>
  </div>
</div>

JavaScript pour générer le calendrier :

let currentDate = new Date();

// Générer les jours du calendrier
function renderCalendar() {
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();

  // Afficher le mois et l'année
  const monthNames = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
                      'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];
  document.getElementById('monthYear').textContent =
    `${monthNames[month]} ${year}`;

  // Calculer le premier jour du mois
  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Générer les cellules du calendrier
  const calendarGrid = document.querySelector('.calendar-grid');
  const daysCells = Array.from(calendarGrid.querySelectorAll('div:not(.weekday)'));
  daysCells.forEach(cell => cell.remove());

  // Ajouter les jours du mois
  for (let i = 1; i <= daysInMonth; i++) {
    const dayCell = document.createElement('div');
    dayCell.className = 'day';
    dayCell.textContent = i;
    dayCell.addEventListener('click', () => selectDate(i, month + 1, year));
    calendarGrid.appendChild(dayCell);
  }
}

// Sélectionner une date
function selectDate(day, month, year) {
  const dateStr = `${String(day).padStart(2, '0')}/${String(month).padStart(2, '0')}/${year}`;
  document.getElementById('dateInput').value = dateStr;
  document.getElementById('calendar').hidden = true;
}

// Navigation mois
document.getElementById('prevMonth').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();
});

document.getElementById('nextMonth').addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  renderCalendar();
});

// Afficher/masquer le calendrier
document.getElementById('toggleCalendar').addEventListener('click', () => {
  const calendar = document.getElementById('calendar');
  calendar.hidden = !calendar.hidden;
  if (!calendar.hidden) renderCalendar();
});

// Initialiser
renderCalendar();

Accessibilité et i18n

Étiquettes et ARIA :

<label for="datepicker">Date de départ</label>
<input type="date" id="datepicker" aria-label="Sélectionner une date"
       aria-describedby="dateHelp">
<small id="dateHelp">Format : JJ/MM/AAAA</small>

Support multilingue avec Flatpickr :

// Français
flatpickr('#date1', { locale: 'fr', dateFormat: 'd/m/Y' });

// Anglais
flatpickr('#date2', { locale: 'en', dateFormat: 'm/d/Y' });

// Allemand
flatpickr('#date3', { locale: 'de', dateFormat: 'd.m.Y' });

Flatpickr supporte plus de 30 langues. Les formats de date s'adaptent automatiquement selon la localisation.

Cas d'usage pratiques

1. Réserver une date (min/max avec aujourd'hui) :

flatpickr('#reservationDate', {
  locale: 'fr',
  dateFormat: 'd/m/Y',
  minDate: 'today',        // À partir d'aujourd'hui
  maxDate: new Date().fp_incr(30), // 30 jours maximum
  disable: ['2026-04-26', '2026-05-01'], // Jours fermés
  enableTime: true,
  time_24hr: true,
  minuteIncrement: 30
});

2. Saisir une date de naissance :

flatpickr('#birthDate', {
  locale: 'fr',
  dateFormat: 'd/m/Y',
  maxDate: new Date(new Date().setFullYear(new Date().getFullYear() - 18)),
  monthSelectorType: 'dropdown'
});

3. Plage de dates (date de/à) :

const config = {
  locale: 'fr',
  dateFormat: 'd/m/Y',
  mode: 'range', // Mode plage
  minDate: '2026-01-01',
  maxDate: '2026-12-31'
};

flatpickr('#dateRange', config);

Résumé : Pour des besoins simples → input date natif. Pour plus de contrôle → Flatpickr. Pour un design unique → datepicker personnalisée en JavaScript pur.