Time Field – Forui (original) (raw)

A time field allows a time to be selected from a picker or input field.

It is recommended to use FTimeField.picker on touch devices and FTimeField.newon non-primarily touch devices.

The input field supports both arrow key navigation:

Up/Down arrows: Increment/decrement values
Left/Right arrows: Move between time segments

The input field does not support the following locales that use non-western numerals & scripts that require composing, it will default to English:

Arabic (العربية)
Assamese (অসমীয়া)
Bengali (বাংলা)
Persian/Farsi (فارسی)
Marathi (मराठी)
Burmese (မြန်မာ)
Nepali (नेपाली)
Pashto (پښتو)
Tamil (தமிழ்)
Amharic (አማርኛ)
Kannada (ಕನ್ನಡ)
Korean (한국어)
Punjabi (ਪੰਜਾਬੀ)
Thai (ไทย)

The following locales will default to Chinese (zh):

Chinese (Hong Kong) (繁體中文)
Chinese (Taiwan) (繁體中文)

Preview

Usage

`FTimeField(...)`

FTimeField(
  controller: FTimeFieldController(
    vsync: this,
    initialTime: FTime(12, 30),
    validator: (time) => time != null && time < const FTime(14, 30) ? 'Time must be in the future' : null,
  ),
  initialTime: FTime(12, 30),
  style: FTimeFieldStyle(...),
  textAlign: TextAlign.start,
  textAlignVertical: TextAlignVertical.center,
  autofocus: false,
  expands: false,
  onEditingComplete: () => print('Editing complete'),
  onSubmit: (time) => print('Time submitted: $time'),
  mouseCursor: SystemMouseCursors.text,
  canRequestFocus: true,
  builder: (context, styles, child) => child!,
  prefixBuilder: (context, styles, child) => Icon(FIcons.clock2),
  suffixBuilder: null,
  label: Text('Select Time'),
  description: Text('Choose a time'),
  enabled: true,
  onChange: (time) => print('Time changed: $time'),
  onSaved: (time) => print('Time saved: $time'),
  autovalidateMode: AutovalidateMode.onUnfocus,
);

`FTimeField.picker(...)`

FTimeField.picker(
  controller: FTimeFieldController(
    vsync: this,
    initialTime: FTime(12, 30),
    validator: (time) => time != null && time < const FTime(14, 30) ? 'Time must be in the future' : null,
  ),
  initialTime: FTime(12, 30),
  format: DateFormat.jms(),
  textAlign: TextAlign.start,
  textAlignVertical: TextAlignVertical.center,
  expands: false,
  mouseCursor: SystemMouseCursors.text,
  canRequestFocus: true,
  hint: 'Select a time',
  spacing: FPortalSpacing(4),
  shift: FPortalShift.flip,
  offset: Offset.zero,
  hourInterval: 1,
  minuteInterval: 1,
  label: Text('Picker Time'),
  description: Text('Select a time from the calendar'),
  onChange: (time) => print('Time changed: $time'),
  builder: (context, styles, child) => child!,
  prefixBuilder: (context, styles, child) => Icon(Icons.calendar_today),
  suffixBuilder: null,
);

Time Field – Forui (original) (raw)

Preview

Usage

`FTimeField(...)`

`FTimeField.picker(...)`

Examples

24 Hours

Preview

Picker Only

Preview

Custom Validation

Preview

Form

Preview