日付ピッカー

フォームやフィルターで、特定の日付、期間、誕生日を選択するためのポップオーバーカレンダーです。ネオブルータリズム風の枠線とハードシャドウが特徴です。

"use client"

import * as React from "react"

Date Picker は単一のプリミティブではありません。Popover と Calendar を組み合わせ、カレンダーグリッドは react-day-picker が処理します。ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、太字のタイポグラフィです。

次のような場面で使います：

予約とスケジュール — チェックイン／チェックアウト期間、予約枠、配送日。
フォームフィールド — 生年月日、締切、開始日。入力欄と組み合わせて手入力にも対応。
ダッシュボードのフィルター — 分析、注文、レポートの期間選択。

インストール

Date Picker は、<Popover /> と <Calendar /> コンポーネントを組み合わせて構築されています。

Popover と Calendar コンポーネントのインストール手順をご覧ください。

使い方

components/example-date-picker.tsx

"use client"
 
import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
 
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
 
export function DatePickerDemo() {
  const [date, setDate] = React.useState<Date>()
 
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            data-empty={!date}
            className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
          />
        }
      >
        <CalendarIcon />
        {date ? format(date, "PPP") : <span>Pick a date</span>}
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={setDate} />
      </PopoverContent>
    </Popover>
  )
}

詳しくは React DayPicker のドキュメントをご覧ください。

コンポジション

日付ピッカーは Popover と Calendar から構築されます（DatePicker というルートコンポーネントはありません）。

Popover
├── PopoverTrigger
└── PopoverContent
    └── Calendar

使用例

基本

基本的な日付ピッカーコンポーネントです。

"use client"

import * as React from "react"

範囲ピッカー

日付の範囲を選択するための日付ピッカーコンポーネントです。

"use client"

import * as React from "react"

生年月日

生年月日を選択するための日付ピッカーコンポーネントです。このコンポーネントには、日付と月を選択するためのドロップダウン式のキャプションレイアウトが含まれています。

"use client"

import * as React from "react"

入力フィールド

日付を選択するための入力フィールドを備えた日付ピッカーコンポーネントです。

"use client"

import * as React from "react"

時刻ピッカー

時刻を選択するための時刻入力フィールドを備えた日付ピッカーコンポーネントです。

"use client"

import * as React from "react"

自然言語ピッカー

このコンポーネントは、chrono-node ライブラリを使用して自然言語の日付を解析します。

"use client"

import * as React from "react"

RTL

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

アクセシビリティ

この合成は WAI-ARIA Date Picker Dialog の例に従います。Popover はトリガーに aria-expanded と aria-controls を配線し、閉じるときにフォーカスを戻します。react-day-picker はラベル付きの日付セルの grid を描画し、roving tabindex を使います。

キーボード操作：

キー	操作
トリガー上の `Space` / `Enter`	ポップオーバーを開く
`ArrowLeft` / `ArrowRight`	前／次の日へフォーカスを移動
`ArrowUp` / `ArrowDown`	前／次の週の同じ曜日へフォーカスを移動
`PageUp` / `PageDown`	前／次の月へ移動
`Shift + PageUp` / `Shift + PageDown`	前／次の年へ移動
`Home` / `End`	週の最初／最後の日へ移動
`Space` / `Enter`	フォーカス中の日を選択
`Escape`	ポップオーバーを閉じ、フォーカスをトリガーへ戻す