菜单
Use ShadDatePicker and ShadDatePicker.range for single or range date selection; presets, ShadDatePickerFormField, ShadDateRangePickerFormField. Use when adding date pickers or date range fields in a Flutter shadcn_ui app or ShadForm.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | shadcn_ui-date-picker |
| description | Use ShadDatePicker and ShadDatePicker.range for single or range date selection; presets, ShadDatePickerFormField, ShadDateRangePickerFormField. Use when adding date pickers or date range fields in a Flutter shadcn_ui app or ShadForm. |
ShadDatePicker is a date picker with optional range and presets. Use ShadDatePicker.range() for range selection. For forms use ShadDatePickerFormField and ShadDateRangePickerFormField with id, label, validator, and optional fromValueTransformer/toValueTransformer.
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 600),
child: const ShadDatePicker(),
)
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 600),
child: const ShadDatePicker.range(),
)
Use a header widget (e.g. ShadSelect) and shared groupId so the date picker popover stays open when the select popover closes. Set selected from preset choice (e.g. today + days offset).
ShadDatePicker(
groupId: groupId,
header: Padding(
padding: const EdgeInsets.only(bottom: 4),
child: ShadSelect<int>(
groupId: groupId,
minWidth: 276,
placeholder: const Text('Select'),
options: presets.entries
.map((e) => ShadOption(value: e.key, child: Text(e.value)))
.toList(),
selectedOptionBuilder: (context, value) => Text(presets[value]!),
onChanged: (value) {
if (value == null) return;
setState(() => selected = today.add(Duration(days: value)));
},
),
),
selected: selected,
calendarDecoration: theme.calendarTheme.decoration,
popoverPadding: const EdgeInsets.all(4),
)
ShadDatePickerFormField(
label: const Text('Date of birth'),
onChanged: print,
description: const Text('Your date of birth is used to calculate your age.'),
validator: (v) {
if (v == null) return 'A date of birth is required.';
return null;
},
)
ShadDateRangePickerFormField(
label: const Text('Range of dates'),
onChanged: print,
description: const Text('Select the range of dates you want to search between.'),
validator: (v) {
if (v == null) return 'A range of dates is required.';
if (v.start == null) return 'The start date is required.';
if (v.end == null) return 'The end date is required.';
return null;
},
)
For form initial value as string (e.g. 'date': '2024-02-01'), use fromValueTransformer and toValueTransformer on ShadDatePickerFormField to convert to/from DateTime. See reference.md or the Form skill for value transformers.
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.