DatePickerデートピッカー
日付を選択するためのコンポーネントです。カレンダー形式で日付を選択できます。
更新 2025/9/3
基本
単一の日付を選択する基本的なデートピッカーです。
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
import { DatePicker } from "@serendie/ui";
export function BasicSample() {
return <DatePicker label="日付を選択" placeholder="YYYY/MM/DD" />;
}日付範囲
開始日と終了日を選択できる範囲選択型のデートピッカーです。
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 1 | 2 | 3 | 4 |
import { DatePicker } from "@serendie/ui";
export function RangeSample() {
return <DatePicker label="期間を選択" selectionMode="range" />;
}状態
4種類の状態があります。入力必須とする際はrequired propsを使用し、非活性とする際はdisabled propsを使用してください。
- Enabled
日 月 火 水 木 金 土 311234567891011121314151617181920212223242526272829301234- Filled
日 月 火 水 木 金 土 311234567891011121314151617181920212223242526272829301234- Error
正しい日付を入力してください
日 月 火 水 木 金 土 311234567891011121314151617181920212223242526272829301234- Disabled
日 月 火 水 木 金 土 311234567891011121314151617181920212223242526272829301234
import { DatePicker, parseDate } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";
export function StateSample() {
return (
<Dl>
<Dt>Enabled</Dt>
<Dd>
<DatePicker label="日付" placeholder="YYYY/MM/DD" />
</Dd>
<Dt>Filled</Dt>
<Dd>
<DatePicker
label="日付"
placeholder="YYYY/MM/DD"
required
value={[parseDate("2025-09-03")]}
/>
</Dd>
<Dt>Error</Dt>
<Dd>
<DatePicker
label="日付"
placeholder="YYYY/MM/DD"
required
invalid
invalidMessage="正しい日付を入力してください"
value={[parseDate("2025-09-03")]}
/>
</Dd>
<Dt>Disabled</Dt>
<Dd>
<DatePicker label="日付" placeholder="YYYY/MM/DD" disabled />
</Dd>
</Dl>
);
}