Headless

Le paquet headless (react-date-range-picker-headless) fournit des hooks et des fournisseurs de contexte sans style. Il contient toute la gestion d’état, la logique de calendrier, la navigation au clavier et les fonctionnalités d’accessibilité — mais zéro CSS, zéro opinion sur le balisage.

Vous apportez votre propre interface utilisateur.

Installation

npm install react-date-range-picker-headless

Quand utiliser Headless

  • Vous avez un système de design avec sa propre bibliothèque de composants
  • Vous voulez un contrôle au pixel près sur chaque élément
  • Vous construisez un sélecteur de date personnalisé pour un cas d’utilisation spécifique
  • Vous voulez intégrer un framework CSS non couvert par les paquets stylisés

Si vous voulez des composants stylisés prêts à l’emploi, consultez plutôt Styled, Tailwind v4, ou Tailwind v3.

Comment ça marche

  1. Choisissez un hook en fonction de votre cas d’utilisation
  2. Passez les options (value, onChange, config)
  3. Récupérez l’état et les gestionnaires
  4. Affichez votre propre interface utilisateur en utilisant les valeurs retournées
import { useState } from "react";
import { useDatePicker } from "react-date-range-picker-headless";
function MyDatePicker() {
  const [value, setValue] = useState<Date | null>(null);


  const {
    isOpen,
    calendar,
    getDayProps,
    displayValue,
    handleToggle,
    handleDateClick,
    handleConfirm,
    handlePrevMonth,
    handleNextMonth,
    locale,
  } = useDatePicker({ value, onChange: setValue });


  return (
    <div>
      <button onClick={handleToggle}>{displayValue || locale.placeholder}</button>
      {isOpen && (
        <div>
          <div>
            <button onClick={handlePrevMonth}>{locale.prevMonth}</button>
            <span>{locale.formatMonthYear(calendar.month)}</span>
            <button onClick={handleNextMonth}>{locale.nextMonth}</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}>
            {calendar.weeks.flat().map((day, i) => {
              if (!day) return <span key={i} />;
              const props = getDayProps(day);
              return (
                <button
                  key={i}
                  onClick={() => handleDateClick(day)}
                  style={{
                    background: props.isSelected ? "#0ea5e9" : "transparent",
                    color: props.isDisabled ? "#ccc" : props.isToday ? "#0ea5e9" : "inherit",
                  }}
                >
                  {props.day}
                </button>
              );
            })}
          </div>
          <button onClick={handleConfirm}>{locale.confirm}</button>
        </div>
      )}
    </div>
  );
}

Hooks disponibles

HookCas d’utilisation
useDatePickerSélection d’une seule date
useDateRangePickerSélection d’une plage de dates avec deux calendriers
useDateTimePickerSélection de la date et de l’heure
useDateRangeTimePickerSélection de la plage de dates et de l’heure
useTimePickerMolette de défilement pour l’heure uniquement
useStandaloneTimePickerSélecteur d’heure avec comportement d’ouverture/fermeture

Prochaines étapes