Headless

O pacote headless (react-date-range-picker-headless) fornece hooks e provedores de contexto sem estilos. Ele contém todo o gerenciamento de estado, lógica de calendário, navegação por teclado e recursos de acessibilidade — mas zero CSS, zero opiniões sobre marcação.

Você traz sua própria UI.

Instalação

npm install react-date-range-picker-headless

Quando Usar o Headless

  • Você tem um sistema de design com sua própria biblioteca de componentes
  • Você quer controle pixel-perfect sobre cada elemento
  • Você está construindo um seletor de datas personalizado para um caso de uso específico
  • Você quer integrar com um framework CSS não coberto pelos pacotes estilizados

Se você deseja componentes estilizados prontos para uso, veja Styled, Tailwind v4, ou Tailwind v3 em vez disso.

Como Funciona

  1. Escolha um hook com base no seu caso de uso
  2. Passe opções (value, onChange, config)
  3. Receba de volta o estado e os manipuladores
  4. Renderize sua própria UI usando os valores retornados
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 Disponíveis

HookCaso de Uso
useDatePickerSeleção de data única
useDateRangePickerSeleção de intervalo de datas com calendários duplos
useDateTimePickerSeleção de data + hora
useDateRangeTimePickerSeleção de intervalo de data + hora
useTimePickerRoda de rolagem apenas para hora
useStandaloneTimePickerSeletor de hora com comportamento de abrir/fechar

Próximos Passos