Начало работы с Tailwind CSS v3

Пакет для Tailwind v3 предоставляет компоненты для выбора даты, стилизованные с помощью утилитарных классов Tailwind CSS v3.

Установка

Конфигурация Tailwind

Добавьте плагин и путь content в конфигурацию Tailwind:

import { rdrpPlugin } from "react-date-range-picker-tailwind3/plugin";

export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-date-range-picker-tailwind3/dist/**/*.{js,mjs}",
  ],
  darkMode: "class",
  plugins: [rdrpPlugin],
};

Быстрый старт

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-tailwind3";

function Basic() {
  const [value, setValue] = useState<Date | null>(null);

  return <DatePicker value={value} onChange={setValue} />;
}

Что включено

Все компоненты поддерживают:

• Управляемое значение с помощью value / onChange
• Навигация с помощью клавиатуры
• Темный режим через вариант dark:
• 4 размера: small, medium, large, x-large
• API составных компонентов для кастомизации

Типы TypeScript

Все конфигурационные и типы данных реэкспортируются из пакета — нет необходимости устанавливать headless-пакет отдельно:

import type {
  Locale,
  DatePickerSize,
  TimeConfig,
  MinuteStep,
  SecondStep,
  TimePrecision,
  HourFormat,
  TimePeriod,
  CaptionLayout,
  WeekDay,
  DateRangePreset,
  CalendarMonth,
  DayProps,
} from "react-date-range-picker-tailwind3";

Эти типы полезны для:

• Locale — Пользовательские переопределения локали (названия дней недели, метки кнопок, форматирование дат)
• DatePickerSize — Типизация пропа size ("small" | "medium" | "large" | "x-large")
• TimeConfig — Настройка точности, формата и шагов выбора времени
• DateRangePreset — Определение предустановок для DateRangePicker / DateRangeTimePicker
• CalendarMonth, DayProps — Пользовательский рендеринг с помощью составных компонентов

Смотрите Headless Types для получения подробных определений типов.

Следующие шаги

• DatePicker — Выбор одной даты
• DateRangePicker — Диапазон дат с предустановками
• Compound Components — Кастомизация внутренней структуры
• Theme Override — Кастомизация цветов темы
• Dark Mode — Поддержка темного режима