Docs
カレンダー

カレンダー

ユーザーが日付を入力および編集できる日付フィールドコンポーネント。

SuMoTuWeThFrSa

概要

Calendar コンポーネントは React DayPicker 上に構築されています。

インストール

npx shadcn-ui@latest add calendar

使用法

import { Calendar } from "@/components/ui/calendar"
const [date, setDate] = React.useState<Date | undefined>(new Date())
 
return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-md border"
  />
)

詳細については React DayPicker ドキュメントを参照してください。

DayPicker

<Calendar> コンポーネントを使用して日付選択機能を構築できます。詳細については DayPicker ページを参照してください。

フォーム

Your date of birth is used to calculate your age.