フォームと選択@neumorphism-ui/calendar

Calendar

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

@neumorphism-ui/calendar

Registry JSON

プレビュー

日付選択

2026年9月

2026-09-15

期間選択

2026年9月

2026-09-12 / 2026-09-17

インストール

npx shadcn@latest add @neumorphism-ui/calendar

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

"use client";

import * as React from "react";
import type { DateRange } from "@daypicker/react";
import { enUS, ko, ja, zhCN } from "@daypicker/react/locale";
import { Calendar } from "@/components/ui/calendar";
import { Button } from "@/components/ui/button";

Example

const locales = { en: enUS, ko, ja, zh: zhCN };
const copy = {
  en: { single: "Single date", range: "Date range", clear: "Clear range", empty: "No date selected" },
  ko: { single: "날짜 선택", range: "기간 선택", clear: "기간 초기화", empty: "선택한 날짜 없음" },
  ja: { single: "日付選択", range: "期間選択", clear: "期間をクリア", empty: "日付未選択" },
  zh: { single: "选择日期", range: "选择范围", clear: "清除范围", empty: "未选择日期" },
};
function stamp(date: Date) {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
}

export default function CalendarExample({ locale = "ja" }: { locale?: keyof typeof copy }) {
  const text = copy[locale];
  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 8, 15));
  const [range, setRange] = React.useState<DateRange | undefined>({ from: new Date(2026, 8, 12), to: new Date(2026, 8, 17) });
  return <div className="flex max-w-full flex-wrap items-start gap-6">
    <section data-calendar="single" aria-label={text.single} className="grid max-w-full gap-3"><h3 className="text-sm font-semibold">{text.single}</h3><Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={new Date(2026, 8)} today={new Date(2026, 8, 15)} disabled={new Date(2026, 8, 20)} locale={locales[locale]} /><output aria-live="polite" data-testid="calendar-value" className="text-sm text-[var(--muted-foreground)]">{date ? stamp(date) : text.empty}</output></section>
    <section data-calendar="range" aria-label={text.range} className="grid max-w-full gap-3"><h3 className="text-sm font-semibold">{text.range}</h3><Calendar mode="range" selected={range} onSelect={setRange} defaultMonth={new Date(2026, 8)} today={new Date(2026, 8, 15)} locale={locales[locale]} /><output aria-live="polite" data-testid="calendar-range" className="text-sm text-[var(--muted-foreground)]">{range?.from ? `${stamp(range.from)} / ${range.to ? stamp(range.to) : "…"}` : text.empty}</output><Button size="sm" variant="ghost" className="w-fit justify-self-start" onClick={() => setRange(undefined)}>{text.clear}</Button></section>
  </div>;
}

API リファレンス

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

日	月	火	水	木	金	土

日	月	火	水	木	金	土