Neumorphism UI

Calendar

日付や期間を選ぶカレンダーを、ページ内に常時表示する場合に使います。

プレビュー

日付と期間の選択

制御された単日・期間カレンダーを比較し、選択値の確認や期間のクリアを試します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/calendar

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

日付と期間の選択

npx shadcn@latest add @neumorphism-ui/calendar @neumorphism-ui/button
Registry JSON

使い方

選択モードを指定して selected と onSelect を接続し、日付の locale を渡します。予約や予定の条件に合わせて選択不可の日や月範囲を設定します。

"use client";

import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

API リファレンス

DayPicker v10の日付計算とキーボード操作を使用します。選択日は凹面、期間の中間日は連続した面で示します。

コンポーネントプロパティ型デフォルト説明
Calendarmode"single" | "multiple" | "range"—選択モードを指定します。
Calendarselected / onSelectDate | Date[] | DateRange / callback—選択値と変更コールバックを接続します。
Calendardisabled / locale / startMonth / endMonthDayPickerProps—無効な日付、言語、移動可能な月を指定します。

アクセシビリティ

  • 01

    方向キーで移動し、EnterまたはSpaceで選択します。

  • 02

    開始・終了日、今日、無効な日付のアクセシブルなラベルを保持してください。