Form

Date Time Picker

A date and time picker that allows a date and time to be selected. The picker supports arrow key navigation. Recommended for touch devices.

API Reference

The picker supports arrow key navigation:

  • Up/Down arrows: Increment/decrement selected value
  • Left/Right arrows: Move between wheels

Recommended for touch devices.

1@override
2Widget build(BuildContext context) =>
3 FDateTimePicker(control: .managed(initial: .now()));
4

CLI

To generate a specific style for customization:

dart run forui style create date-time-picker

Usage

FDateTimePicker(...)

1FDateTimePicker(
2 style: .delta(padding: .value(.all(5))),
3 hour24: false,
4 dayInterval: 1,
5 hourInterval: 1,
6 minuteInterval: 1,
7 dateBuilder: FDateTimePicker.defaultDateBuilder,
8)

Examples

24 Hour Clock

1@override
2Widget build(BuildContext context) => FDateTimePicker(
3 control: .managed(initial: .now()),
4 hour24: true,
5);
6

With Custom Intervals

1@override
2Widget build(BuildContext context) => FDateTimePicker(
3 control: .managed(initial: .now()),
4 dayInterval: 2,
5 hourInterval: 2,
6 minuteInterval: 5,
7);
8

Date Field

A date field allows a date to be selected from a calendar or input field.

Label

Describes a form field with a label, description, and error message (if any). This widget is usually used for custom form fields. All form fields in Forui come with this widget wrapped.

On this page

CLI
Usage
FDateTimePicker(...)
Examples
24 Hour Clock
With Custom Intervals