Time picker - FLEX Fields

FlexTimeField selects a local time of day. It does not store a date or timezone offset. Use FlexDurationField for elapsed hours beyond 24.

Basic clock

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTimeField;

FlexTimeField::make('time')
    ->label('Appointment time')
    ->hourCycle(24)
    ->hideTimeZone()
    ->default('14:30');

The default saved format is H:i. The menu opens from the whole readonly input, with standard FLEX dropdown motion.

12-hour display

FlexTimeField::make('time')->hourCycle(12)->default('14:30');

The display becomes 02:30 PM; storage remains 14:30. forceLeadingZeros(false) uses 2:30 PM. An explicit displayFormat() takes priority over the automatic format.

FlexTimeField::make('time')
    ->hourCycle(12)
    ->forceLeadingZeros(false)
    ->hideTimeZone();

Interval steps

FlexTimeField::make('time')->minuteStep(5);
FlexTimeField::make('time')->minuteStep(30);
FlexTimeField::make('time')->granularity('hour');

Minute/second steps must be positive divisors of 60: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 or 60. The minute default is 15. Steps control menu options; an existing precise time is retained until changed. They are not an additional server-side divisibility rule.

Restrict hours

FlexTimeField::make('time')
    ->hourCycle(24)
    ->minValue('09:00')
    ->maxValue('18:00');

The bounds are inclusive and refer to one day. Min must not exceed max. 23:00 to 02:00 is not a same-day clock range; use a date/time range for an overnight period.

Only specific times

FlexTimeField::make('appointment')
    ->allowedTimes(['09:15', '11:40', '15:10'])
    ->defaultTime('09:15')
    ->required();

The list is sorted and deduplicated. Values use HH:mm or HH:mm:ss, regardless of display format. Up to 1,440 entries are accepted. Both typed input and form submission enforce membership.

FlexTimeField::make('time')->allowedTimes([]);   // No available choices.
FlexTimeField::make('time')->allowedTimes(null); // Restore regular intervals.

Without an explicit defaultTime(), the first allowed time becomes the default candidate. An explicit default outside the list is invalid configuration. Empty choices show an empty state, and no time can pass validation.

Seconds

FlexTimeField::make('time')
    ->hourCycle(24)
    ->showSeconds()
    ->secondStep(5)
    ->default('14:30:15');

Seconds have a separate selector. The saved format becomes H:i:s. To offer exact second-bearing slots:

FlexTimeField::make('time')
    ->showSeconds()
    ->allowedTimes(['09:15:10', '09:15:30', '11:40:00']);

Do not configure second-bearing allowed values with a format that discards seconds.

Typed input

FlexTimeField::make('time')
    ->editable()
    ->hourCycle(24)
    ->minValue('09:00')
    ->maxValue('18:00');

Enter a complete clock such as 14:30, or open the menu with ArrowDown/F4. In 12-hour mode include AM/PM. Invalid text and out-of-range times show feedback and fail form validation. This clock input validates the complete text; guided date segments belong to date fields.

Clearable and readonly

FlexTimeField::make('time')->clearable();
FlexTimeField::make('time')->readOnly();
FlexTimeField::make('time')->disabled();

Clock clearing is off by default. Readonly/disabled fields cannot change from typing or menus. An optional empty clock saves null.

Time range

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTimeRangeField;

FlexTimeRangeField::make('opening_hours')
    ->hourCycle(24)
    ->hideTimeZone()
    ->minValue('08:00')
    ->maxValue('20:00')
    ->default(['start' => '09:00', 'end' => '17:00']);

Both endpoints use the same bounds, steps, format and allowed-time list. End may equal start but cannot precede it. Clearing one endpoint leaves an incomplete range; complete both or clear both before submission.

FlexTimeRangeField::make('shift')
    ->hourCycle(12)
    ->allowedTimes(['09:00', '12:00', '17:00'])
    ->editable()
    ->clearable();

Compact API

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTimeSegmentsField;

FlexTimeSegmentsField::make('time')
    ->minuteStep(15)
    ->hourCycle(24)
    ->hideTimeZone()
    ->size('sm');

This class uses the same current time input and dropdown as FlexTimeField; it does not introduce another storage format.

Display and saved format

FlexTimeField::make('time')
    ->hourCycle(12)
    ->displayFormat('g:i A')
    ->storageFormat('H:i:s');

Hidden seconds remain preserved while the displayed value is untouched. A newly selected menu value uses the current seconds unless you explicitly choose another second value.

Timezone label

FlexTimeField::make('time')->timeZone('Europe/Warsaw');
FlexTimeField::make('time')->timeZone('Europe/Warsaw')->hideTimeZone();

Changing the label does not convert stored hours. Resolve local times to instants only after combining a date and timezone in your application.

Keyboard

Enter/Space open a readonly clock. ArrowDown and F4 open either mode. Inside the list, ArrowUp/ArrowDown move between enabled options, Home/End move to the first/last, and Enter selects. Escape closes the list. Focus returns to the trigger after keyboard selection or dismissal.

​Basic clock

​12-hour display

​Interval steps

​Restrict hours

​Only specific times

​Seconds

​Typed input

​Clearable and readonly

​Time range

​Compact API

​Display and saved format

​Timezone label

​Keyboard