Un sélecteur de date et d'heure propre sans dépendances lourdes

À chaque fois qu'un projet nécessite un sélecteur de date, la même histoire se répète. Le <input type="date"> natif semble différent dans chaque navigateur, la personnalisation est douloureuse et son comportement est imprévisible sur les plateformes mobiles. Incorporer des bibliothèques UI massives ou des wrappers obsolètes avec des dizaines de paquets transitifs juste pour un simple calendrier semble inapproprié.

Récemment, je suis tombé sur le dépôt vanilla-calendar-pro. C'est un composant TypeScript élégant pour la sélection de date et d'heure sans dépendances externes. Il fonctionne en JavaScript pur ainsi que dans React, Vue ou Svelte.

Ce qu'il contient et pourquoi c'est pratique

La bibliothèque est conçue pour répondre aux besoins d'interface de base sans alourdir le bundle. Le calendrier ne pèse que quelques kilobytes, pourtant il peut faire presque tout ce que les designers et les chefs de produit demandent généralement.

Voici les points principaux qui se démarquent :

• Zéro dépendance. Pas d'utilitaires tiers d'analyse de date comme moment ou date-fns, il utilise le Intl natif en interne.
• Modes d'affichage flexibles. Le calendrier peut être intégré directement dans le balisage de la page ou ouvert dans une fenêtre popup lors du clic sur un champ.
• Sélection de plage et plusieurs mois à la fois. Idéal pour les réservations d'hôtel, les achats de billets ou les tableaux de bord analytiques.
• Sélecteur d'heure intégré. L'heure peut être configurée au format 24 heures ou AM/PM.
• Thèmes. Il existe des thèmes clairs et sombres prêts à l'emploi, et la personnalisation se fait via les variables CSS standard.

Démarrage rapide

L'installation est standard via n'importe quel gestionnaire de paquets :

npm install vanilla-calendar-pro

Si vous n'avez pas de bundler, vous pouvez inclure le script et les styles directement via CDN.

Dans le balisage, vous avez juste besoin de créer un conteneur vide :

<div id="calendar"></div>

L'initialisation dans le code est propre :

import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    lang: 'ru-RU',
    iso8601: true,
    selection: {
      day: 'multiple-ranged',
    },
  },
  actions: {
    clickDay(event, self) {
      console.log('Выбранные даты:', self.selectedDates);
    },
  },
});

calendar.init();

Quelques lignes de configuration suffisent, et nous avons un calendrier fonctionnel avec support de la sélection de plage et localisation en russe.

Personnalisation pour des tâches spécifiques

Un problème courant avec les composants prêts à l'emploi est que s'écarter du design standard devient un cauchemar. Dans vanilla-calendar-pro, la structure DOM peut être reconstruite pour répondre à vos besoins en utilisant des mises en page personnalisées.

Par exemple, si vous avez besoin de désactiver les dates passées et de bloquer les week-ends, les paramètres sont passés directement dans l'objet de configuration :

const calendar = new VanillaCalendar('#calendar', {
  settings: {
    range: {
      min: 'today',
      disabled: ['2026-05-01', '2026-05-09'],
    },
    selection: {
      time: 24,
    },
  },
  actions: {
    changeTime(event, self) {
      console.log('Установленное время:', self.selectedTime);
    },
  },
});

calendar.init();

Le composant gère gracieusement les mises à jour dynamiques des paramètres. Si l'utilisateur change la langue dans l'application, vous appelez simplement la méthode update() avec les nouvelles options sans redessiner complètement la page ni créer de fuites de mémoire.

Intégration avec les frameworks

Bien que « vanilla » soit dans le nom, l'auteur s'est assuré qu'il soit pratique de travailler avec les bibliothèques réactives.

Dans React, le calendrier s'enveloppe facilement dans un hook useEffect :

import { useEffect, useRef } from 'react';
import { VanillaCalendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';

export function DatePicker({ onSelect }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const calendar = new VanillaCalendar(containerRef.current, {
      actions: {
        clickDay(event, self) {
          onSelect(self.selectedDates);
        },
      },
    });

    calendar.init();

    return () => {
      calendar.destroy();
    };
  }, [onSelect]);

  return <div ref={containerRef} />;
}

La méthode destroy() nettoie correctement les gestionnaires d'événements, ainsi le composant ne laisse pas de déchets en mémoire lors du démontage.

Qui trouvera cela utile

Le projet comble le vide entre les géants des UI lourds et les entrées natives primitives. Si vous écrivez un projet personnel, construisez une landing page ou créez un panneau d'administration où vous ne voulez pas tirer des composants volumineux, c'est un excellent candidat.

Le code est entièrement typé, les sources sont ouvertes et la documentation sur le site officiel couvre en profondeur toutes les méthodes de l'API et les exemples de style. Ça mérite d'être ajouté aux favoris pour le prochain sprint.