Date Picker
フィールド型のボタンからカレンダーを開き、省スペースで日付を選ぶ場合に使います。
プレビュー
期限の選択とリセット
範囲内の期限を選択・クリアし、初期値へのリセットや無効状態を比較します。
プレビューを読み込んでいます。
インストール
この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。
npx shadcn@latest add @neumorphism-ui/date-picker共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。
期限の選択とリセット
npx shadcn@latest add @neumorphism-ui/date-picker @neumorphism-ui/button使い方
ラベル、value、onValueChange を提供します。地域別の文言、日付制約、補足を設定し、値のクリアやフォームのリセットはアプリで定義します。
"use client";
import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";
export default function Example() {
const [date, setDate] = useState<Date | undefined>();
return <DatePicker label="Due date" name="dueDate" value={date} onValueChange={setDate} />;
}API リファレンス
親が選択値を管理します。nameを指定するとUTC変換せず、現地日付をYYYY-MM-DDで送信します。リセットも親の状態を更新します。
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
DatePicker | value / onValueChange | Date | undefined / callback | — | 現在の日付と変更コールバック。空値はundefinedです。 |
DatePicker | label / name / describedBy | string | — | ボタン名、フォーム名、説明要素のIDです。 |
DatePicker | disabledDates / startMonth / endMonth | Matcher | Matcher[] / Date | — | 無効な日付と移動可能な月の範囲です。 |
アクセシビリティ
- 01
開くとカレンダーに、閉じるとトリガーにフォーカスが移ります。
- 02
必須値は親フォームで検証し、invalidとdescribedByでエラーを接続してください。