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

含まれるもの

ComponentDescription
DatePickerポップアップカレンダーによる単一日付選択
DateRangePickerデュアルカレンダーとプリセットによる日付範囲選択
DateTimePickerタイムスクロールパネルによる日付＋時刻選択
DateRangeTimePicker日付範囲＋時刻選択

すべてのコンポーネントは以下をサポートしています:

  • value / onChange による制御された値
  • キーボードナビゲーション
  • CSS変数によるダークモード
  • 4つのサイズ: small、medium、large、x-large
  • カスタマイズのための Compound Component 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 — Compound Components を使用したカスタムレンダリング

詳細な型定義については、Headless の型 を参照してください。

次のステップ