Primeros pasos con estilo

El paquete con estilo proporciona componentes de selección de fechas prediseñados con CSS integrado. No se requiere marco CSS.

Instalación

npm install react-date-range-picker-styled

Después de la instalación, importe el CSS en el punto de entrada de su aplicación:

import "react-date-range-picker-styled/rdrp-styles.css";

Inicio rápido

import { useState } from "react";
import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


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


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

Qué está incluido

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

Todos los componentes soportan:

  • Valor controlado con value/onChange
  • Navegación por teclado
  • Modo oscuro mediante variables CSS
  • 4 tamaños: pequeño, mediano, grande, x-grande
  • API de componentes compuestos para personalización

Tipos de mecanografiado

Toda la configuración y los tipos de datos se reexportan desde el paquete; no es necesario instalar el paquete sin cabeza por separado:

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

Estos tipos son útiles para:

  • Configuración regional: anulación de configuración regional personalizada (nombres de días laborables, etiquetas de botones, formato de fecha)
  • DatePickerSize — Escribiendo el atributo size ("small" | "medium" | "large" | "x-large")
  • TimeConfig — Configurar la precisión, el formato y los pasos del selector de tiempo
  • DateRangePreset — Definición de ajustes preestablecidos para DateRangePicker/DateRangeTimePicker
  • CalendarMonth, DayProps — Representación personalizada con componentes compuestos

Consulte Tipos sin cabeza para obtener definiciones de tipos detalladas.

Próximos pasos