Shadcn Date Pickerの備忘録

まず初めに

業務でShadcnのDate Pickerを使ってコンポーネントを作成する機会があったので、Date Pickerで使用した機能についてまとめます。

react-day-picker v9.11.0
date-fns v4.1.0

Shadcnについて

shadcnは、Radix UIをベースにしたReact/Next.js向けのUIコンポーネント集です。
Tailwind CSSと組み合わせることで、アクセシビリティに配慮されたモダンで拡張可能なUIを素早く構築することができます。
「UIライブラリ」ではなく、コードをコピーして自分のプロジェクトに組み込むスタイルが特徴です。
なのでプロジェクトに必要なものを都度インストールする形になります。

Date Pickerに必要なもの

inputをクリックして、Calendarを表示させたかったため、以下のコンポーネントをインストールします。

• Popover
• Calendar

npx shadcn@latest add popover
npx shadcn@latest add calendar

使い方

インストールして生成された、Calendarをインポートします。

import { Calendar } from "@/components/ui/calendar"

export const CalendarDemo = () => {
const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)

カスタマイズの仕方

Calendarは内部でreact-day-calendarを使用しているので、詳しいカスタマイズの仕方は以下をご参考にしてください。

スタイルに関しては、以下のカレンダーの構造を見ながら調整しました。スタイルに関しては無限のカスタマイズができると感じました。

日本語表示

言語の変更は、localeを使用します。
shadcnのCalendarに以下の変更を加えます。

import { ja } from "date-fns/locale"

function Calendar......
  <DayPicker
     locale={ja}
   />

react-day-pickerはdate-fnsのlocaleを全てサポートしています。
なのでdate-fnsのlocaleを使用することをお勧めします。

特定の日を選択させない。

disabledを使います。typeはMatcherで定義されていて、以下のような形でdisabledに渡してあげます。

  // Match weekends and specific holidays
  const matcher: Matcher = [
    { dayOfWeek: [0, 6] }, // Weekends
    { from: new Date(2023, 11, 24), to: new Date(2023, 11, 26) }, // Christmas
  ];

   // 2025年9月21日は選択できないようにする
   return (
    <Calendar
       disabled={[new Date(2025, 9, 21)]}
    />

• 複数日付を渡すことや、いつからいつまでの間を選択できないようにすることもできます。

おまけ

月始まりにする

ビジネスシーンだと月始まりにした方が、いいと思うので月始まりにも対応させます。

import { ja } from "date-fns/locale"

// 月始まりにしたいので、1を指定
function Calendar......
  <DayPicker
     weekStratsOn={1}
   />

まとめ

今回はShadcnのCalendarについて軽くまとめてみました。
誰かの助けになれば幸いです。