📅

react-day-picker v9 → v10 移行ガイド【パッケージ名が変わりました】

2026/05/16に公開

自分が運営している UI Memo（UIコンポーネントのデモ・ライブラリ比較サイト）で、react-day-picker を v9 から v10 にアップデートした。
v10 は「クリーンアップリリース」という位置づけだが、パッケージ名が変わったのが最大のポイント。v9 で deprecated になっていた API が一斉に削除されたので、放置していた人はここで対応が必要になる。

 react-day-picker とはreact-day-picker は React 向けの日付ピッカーライブラリだ。シングル選択・複数選択・範囲選択をサポートしていて、WAI-ARIA 準拠のアクセシビリティが特徴。
同じ日付ピッカー系のライブラリとして比較されることが多いのはこのあたり。

react-datepicker：最も人気がある。ポップアップ・インライン・時刻選択まで全部入り。

Mantine DatePicker：Mantine の統一デザインシステムに組み込まれた日付ピッカー。Mantine 採用プロジェクトなら追加依存なし。

react-day-picker：軽量（~10KB）でアクセシブル。CSS カスタムプロパティでスタイル変更が容易。shadcn/ui の Calendar コンポーネントの内部でも使われている。
実際のデモと比較は UI Memo の日付範囲ピッカーページ で確認できる。

 v10 で変わったことv10 は 2026年2月26日にリリースされた。大きな新機能はなく、v9 で deprecated になった API を削除した「整理」のリリースだ。
ただし、以下の3点は把握しておかないとハマる。
パッケージ名が @daypicker/react に変わった
v9 の deprecated props が一斉削除された
classNames / styles のキー名が変わった
v9 で推奨 API をすでに使っていた場合、移行はほぼ import の書き換えだけで済む。

 変更点① パッケージ名が @daypicker/react になったこれが最大の変更点。react-day-picker から @daypicker/react にリネームされた。
# 旧パッケージを削除して新パッケージをインストール
npm uninstall react-day-picker
npm install @daypicker/react
互換性のため react-day-picker パッケージ名でも v10 はインストールできるが、新規プロジェクトや移行時は @daypicker/react を使うのが推奨。
// ❌ v9 まで
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';

// ✅ v10 以降
import { DayPicker } from '@daypicker/react';
import '@daypicker/react/style.css';
スコープ付きパッケージ名になったことで、今後非グレゴリオ暦（ペルシャ暦、ヒジュラ暦など）が @daypicker/* 名前空間の別パッケージとして提供されるようになった。

 変更点② locale の import 先が変わったv9 までは date-fns/locale から locale をインポートしていたが、v10 では @daypicker/react/locale から直接インポートできるようになった。
// ❌ v9 まで
import { ja } from 'date-fns/locale';

// ✅ v10 以降
import { ja } from '@daypicker/react/locale';
date-fns/locale からのインポートも引き続き動作するが、@daypicker/react/locale を使えば date-fns を直接触る必要がなくなる。
ただし、プロジェクト内で date-fns を他の用途（フォーマット、日付計算など）でも使っている場合は、そちらの依存は残しておくこと。

 変更点③ deprecated な props が削除されたv9 で「使えるけど非推奨」だった props が v10 で完全に削除された。以下が主な置換対象。

 ナビゲーション系// ❌ v10 で削除
<DayPicker fromDate={new Date(2020, 0)} toDate={new Date(2030, 11)} />
<DayPicker fromMonth={new Date(2020, 0)} toMonth={new Date(2030, 11)} />
<DayPicker fromYear={2020} toYear={2030} />

// ✅ v10 以降
<DayPicker startMonth={new Date(2020, 0)} endMonth={new Date(2030, 11)} />
fromDate / toDate / fromMonth / toMonth / fromYear / toYear はすべて startMonth / endMonth に統一された。

 フォーカス// ❌ v10 で削除
<DayPicker initialFocus />

// ✅ v10 以降
<DayPicker autoFocus />

 イベントハンドラ以下のイベント props はすべて削除された。カスタムコンポーネントで代替する。

onDayKeyUp / onDayKeyPress

onDayPointerEnter / onDayPointerLeave

onDayTouchCancel / onDayTouchEnd / onDayTouchMove / onDayTouchStart
onWeekNumberClick

 ユーティリティ関数// ❌ v10 で削除
import { formatMonthCaption, labelDay, isMatch } from 'react-day-picker';

// ✅ v10 以降
import { formatCaption, labelDayButton } from '@daypicker/react';
// isMatch は削除（代替なし）

 変更点④ classNames / styles のキー名が変わったカスタムスタイリングで classNames prop を使っている場合、キー名の更新が必要。これは shadcn/ui の Calendar コンポーネントをコピーして使っている人にも影響する。
// ❌ v9 までの deprecated キー
classNames={{
  day_selected: "bg-blue-600 text-white",
  day_range_start: "rounded-l",
  day_range_end: "rounded-r",
  day_range_middle: "bg-blue-100",
  table: "w-full",
  nav_button: "p-1",
}}

// ✅ v10 のキー
classNames={{
  selected: "bg-blue-600 text-white",
  range_start: "rounded-l",
  range_end: "rounded-r",
  range_middle: "bg-blue-100",
  month_grid: "w-full",
  button_previous: "p-1",
  button_next: "p-1",
}}
主な変更をまとめると：


v9（deprecated）
v10


day_selected
selected

day_disabled
disabled

day_today
today

day_range_start
range_start

day_range_end
range_end

day_range_middle
range_middle

table
month_grid

tbody
weeks

head_cell
weekday

cell
day

day
day_button

nav_button

button_previous / button_next


shadcn/ui ユーザーは shadcn-ui/ui#10441 も確認しておくとよい。

 変更点⑤ 非グレゴリオ暦が別パッケージに分離されたペルシャ暦・ヒジュラ暦・仏暦・エチオピア暦・ヘブライ暦を使っている場合、別途インストールが必要になった。
# ❌ v9 まで
import { DayPicker } from 'react-day-picker/persian';

# ✅ v10 以降
npm install @daypicker/persian
import { DayPicker } from '@daypicker/persian';
日本語ロケールのみであれば影響なし。

 実際の移行コード（範囲選択の例）UI Memo で使っていた日付範囲ピッカーの移行を例として示す。

 Before（v9）'use client';
import { DayPicker, type DateRange } from 'react-day-picker';
import 'react-day-picker/style.css';
import { useState } from 'react';
import { ja } from 'date-fns/locale';

export function DateRangePickerDemo() {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
  });

  return (
    <DayPicker
      mode="range"
      selected={range}
      onSelect={setRange}
      locale={ja}
      numberOfMonths={2}
    />
  );
}

 After（v10）'use client';
import { DayPicker, type DateRange } from '@daypicker/react';
import '@daypicker/react/style.css';
import { useState } from 'react';
import { ja } from '@daypicker/react/locale';

export function DateRangePickerDemo() {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
  });

  return (
    <DayPicker
      mode="range"
      selected={range}
      onSelect={setRange}
      locale={ja}
      numberOfMonths={2}
    />
  );
}
この例では import の3行だけ が変更箇所。mode="range" や selected / onSelect といったコア API は v10 でも変わっていないので、v9 の推奨 API を使っていればコンポーネント本体はそのまま動く。

 移行チェックリスト移行時にやることをリストにしておく。
# 1. deprecated API の使用箇所を洗い出す
grep -rn "react-day-picker" --include="*.tsx" --include="*.ts"
grep -rn "fromDate\|toDate\|fromMonth\|toMonth\|fromYear\|toYear\|initialFocus" --include="*.tsx"
grep -rn "day_selected\|day_range_start\|day_range_end\|nav_button" --include="*.tsx"

# 2. パッケージを入れ替える
npm uninstall react-day-picker
npm install @daypicker/react

# 3. import を一括置換する
# "react-day-picker" → "@daypicker/react"
# "react-day-picker/style.css" → "@daypicker/react/style.css"

# 4. ビルドして確認
npm run build

 まとめv10 は「壊す」アップデートではなく「片付ける」アップデートだ。v9 で deprecated 警告を無視していた箇所が一気にコンパイルエラーになるが、やることは明確。

パッケージ名：react-day-picker → @daypicker/react

locale：date-fns/locale → @daypicker/react/locale（推奨）

props：fromDate / toDate → startMonth / endMonth など

classNames：day_selected → selected など
v9 の推奨 API をすでに使っていれば、移行作業はほぼ import の書き換えで終わる。
各ライブラリの実際のデモは UI Memo で確認できる。react-datepicker・Mantine DatePicker との比較形式で掲載しているので、日付ピッカーの選定にも活用してほしい。
→ 日付範囲ピッカー ライブラリ比較 | UI Memo
この記事を書いたKは、UI Memo というUIコンポーネント実装リファレンスサイトを運営しています。ライブラリの比較・デモ・コードスニペットを中心にまとめているので、ぜひ覗いてみてください。

v9（deprecated）	v10
`day_selected`	`selected`
`day_disabled`	`disabled`
`day_today`	`today`
`day_range_start`	`range_start`
`day_range_end`	`range_end`
`day_range_middle`	`range_middle`
`table`	`month_grid`
`tbody`	`weeks`
`head_cell`	`weekday`
`cell`	`day`
`day`	`day_button`
`nav_button`	`button_previous` / `button_next`

react-day-picker v9 → v10 移行ガイド【パッケージ名が変わりました】

react-day-picker とは

v10 で変わったこと

変更点① パッケージ名が `@daypicker/react` になった

変更点② locale の import 先が変わった

変更点③ deprecated な props が削除された

ナビゲーション系

フォーカス

イベントハンドラ

ユーティリティ関数

変更点④ classNames / styles のキー名が変わった

変更点⑤ 非グレゴリオ暦が別パッケージに分離された

実際の移行コード（範囲選択の例）

Before（v9）

After（v10）

移行チェックリスト

まとめ

Discussion