Premiers pas avec Tailwind CSS v3

Le package Tailwind v3 fournit des composants de sélecteur de date stylisés avec les classes utilitaires Tailwind CSS v3.

Installation

npm install react-date-range-picker-tailwind3

Configuration de Tailwind

Ajoutez le plugin et le chemin de contenu à votre configuration Tailwind :

tailwind.config.js
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],
};

Démarrage rapide

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} />;
}

Ce qui est inclus

ComponentDescription
DatePickerSingle date selection with popup calendar
DateRangePickerDate range selection with dual calendar and presets
DateTimePickerDate + time selection with time scroll panel
DateRangeTimePickerDate range + time selection

Tous les composants prennent en charge :

  • Valeur contrôlée avec value / onChange
  • Navigation au clavier
  • Mode sombre via la variante dark:
  • 4 tailles : “petit”, “moyen”, “grand”, “x-large”
  • API de composant composé pour la personnalisation

Types de scripts dactylographiés

Tous les types de configuration et de données sont réexportés à partir du package — pas besoin d’installer le package sans tête séparément :

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

Ces types sont utiles pour :

  • Locale — Remplacements de paramètres régionaux personnalisés (noms des jours de la semaine, étiquettes des boutons, formatage de la date)
  • DatePickerSize — Saisie de l’accessoire size (“small”|”medium”|”large”|”x-large”`)
  • TimeConfig — Configuration de la précision, du format et des étapes du sélecteur de temps
  • DateRangePreset — Définition des préréglages pour DateRangePicker / DateRangeTimePicker
  • CalendarMonth, DayProps — Rendu personnalisé avec des composants composés

Voir Types sans tête pour des définitions de types détaillées.

Prochaines étapes