Back to Details

shadcn_ui-date-picker

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Date Picker

Shadcn UI — 日期选择器

Instructions

使用说明

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
.
ShadDatePicker
是一款支持可选范围和预设功能的日期选择器。使用
ShadDatePicker.range()
实现范围选择。在表单场景中，可搭配
id
、
label
、
validator
以及可选的
fromValueTransformer
/
toValueTransformer
参数使用
ShadDatePickerFormField
和
ShadDateRangePickerFormField
组件。

Single

单个日期选择

dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 600),
  child: const ShadDatePicker(),
)
dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 600),
  child: const ShadDatePicker(),
)

Range

日期范围选择

dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 600),
  child: const ShadDatePicker.range(),
)
dart
ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 600),
  child: const ShadDatePicker.range(),
)

With presets

带预设功能

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).
dart
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),
)
使用
header
组件（例如
ShadSelect
）并设置共享的
groupId
，这样当选择器弹窗关闭时，日期选择器的弹窗仍会保持打开状态。根据预设选项设置
selected
值（例如今日加上指定天数偏移）。
dart
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),
)

Form fields

表单字段

dart
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.
dart
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;
  },
)
如果表单初始值为字符串格式（例如
'date': '2024-02-01'
），可在
ShadDatePickerFormField
上使用
fromValueTransformer
和
toValueTransformer
实现与
DateTime
格式的相互转换。有关值转换器的详情，请查看reference.md或Form技能文档。