shadcn_ui-time-picker

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Time Picker

Shadcn UI — 时间选择器

Instructions

使用说明

ShadTimePicker

is a time picker component. Optional

trailing

widget (e.g. icon). For forms use

ShadTimePickerFormField

with

label

description

onChanged

, and

validator

. Use

ShadTimePickerFormField.period

for AM/PM period selection.

ShadTimePicker

是一个时间选择器组件，支持可选的尾部组件（trailing widget，例如图标）。在表单中使用

ShadTimePickerFormField

时，可配置

label

、

description

、

onChanged

和

validator

参数。使用

ShadTimePickerFormField.period

来实现AM/PM时段选择。

Standalone

独立使用

dart

const ShadTimePicker(
  trailing: Padding(
    padding: EdgeInsets.only(left: 8, top: 14),
    child: Icon(LucideIcons.clock4),
  ),
)

dart

const ShadTimePicker(
  trailing: Padding(
    padding: EdgeInsets.only(left: 8, top: 14),
    child: Icon(LucideIcons.clock4),
  ),
)

Form field

表单字段

dart

ShadTimePickerFormField(
  label: const Text('Pick a time'),
  onChanged: print,
  description: const Text('The time of the day you want to pick'),
  validator: (v) => v == null ? 'A time is required' : null,
)

dart

ShadTimePickerFormField(
  label: const Text('Pick a time'),
  onChanged: print,
  description: const Text('The time of the day you want to pick'),
  validator: (v) => v == null ? 'A time is required' : null,
)

Period (AM/PM)

时段选择（AM/PM）

dart

ShadTimePickerFormField.period(
  label: const Text('Pick a time'),
  onChanged: print,
  description: const Text('The time of the day you want to pick'),
  validator: (v) => v == null ? 'A time is required' : null,
)

dart

ShadTimePickerFormField.period(
  label: const Text('Pick a time'),
  onChanged: print,
  description: const Text('The time of the day you want to pick'),
  validator: (v) => v == null ? 'A time is required' : null,
)