ホーム/コンポーネント/フォームと入力/日付入力 DatePicker

DatePicker / DateInput / DateRangeInput

日付選択コンポーネント群。DatePicker はカレンダー UI、DateInput はテキスト入力、DateRangeInput は期間選択。

import { DatePicker, DateInput, DateRangeInput } from "@blueai/ui"

Examples

DateInput

発行日

YYYY/MM/DD

const [date, setDate] = useState("");

<DateInput label="発行日" value={date} onChange={setDate} />

DateRangeInput

期間

開始日〜終了日

const [startDate, setStartDate] = useState("");
const [endDate, setEndDate] = useState("");

<DateRangeInput
  label="期間"
  startValue={startDate}
  endValue={endDate}
  onStartChange={setStartDate}
  onEndChange={setEndDate}
/>

Props

Prop	Type	Default	Description
value*	string	—	日付値 (YYYY-MM-DD)
onChange	(value: string) => void	—	値変更ハンドラ
label	string	—	ラベルテキスト