Начало работы со Styled

Пакет styled предоставляет предварительно стилизованные компоненты для выбора даты со встроенным CSS. Не требует CSS-фреймворка.

Установка

npm install react-date-range-picker-styled

После установки импортируйте CSS в точке входа вашего приложения:

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

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

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

Что включено

КомпонентОписание
DatePickerВыбор одной даты с всплывающим календарем
DateRangePickerВыбор диапазона дат с двойным календарем и предустановками
DateTimePickerВыбор даты и времени с панелью прокрутки времени
DateRangeTimePickerВыбор диапазона дат и времени

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

  • Контролируемое значение с помощью value / onChange
  • Навигацию с клавиатуры
  • Темный режим через CSS-переменные
  • 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-styled";

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

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

Смотрите Типы Headless для подробного определения типов.

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