Skip to main content
The Time Picker component requires a Flux Pro license. Learn more about Flux Pro.
The Time Picker component provides an intuitive interface for selecting time values, with support for 12-hour and 24-hour formats, minute intervals, and time range selection.

​
Overview

Time Picker offers a user-friendly alternative to manual time entry, reducing errors and improving the user experience for scheduling and time-sensitive features.

​
Use Cases

Appointment Scheduling

Select meeting and appointment times

Event Creation

Set start and end times for events

Reminders

Schedule notification times

Time Tracking

Log work hours and durations

​
Key Features

  • 12/24 Hour Format - Support for both time formats
  • Minute Intervals - Configure step intervals (5, 10, 15, 30 minutes)
  • Time Ranges - Select start and end times
  • Keyboard Input - Type time directly
  • Quick Selection - Common times (9:00 AM, 12:00 PM, etc.)
  • Validation - Min/max time constraints
  • Timezone Support - Display and convert timezones
  • Livewire Integration - Seamless wire:model binding

​
Common Patterns

​
Basic Time Selection

<flux:time-picker 
    wire:model="startTime"
    placeholder="Select time"
/>

​
24-Hour Format

<flux:time-picker 
    wire:model="time"
    format="24"
    step="15"
/>

​
Time Range

<flux:time-picker 
    wire:model="startTime"
    label="Start Time"
/>
<flux:time-picker 
    wire:model="endTime"
    label="End Time"
    :min="$startTime"
/>

​
With Constraints

<flux:time-picker 
    wire:model="appointmentTime"
    min="09:00"
    max="17:00"
    step="30"
/>

​
Props

PropTypeDescription
wire:modelstringLivewire property binding
formatstringTime format: ‘12’ or ‘24’
stepintMinute interval (5, 10, 15, 30)
minstringMinimum selectable time
maxstringMaximum selectable time
placeholderstringInput placeholder
disabledboolDisable the picker
timezonestringDisplay timezone

​
Integration with Date Picker

Combine with Date Picker for full datetime selection: 
<flux:field>
    <flux:label>Appointment Date & Time</flux:label>
    <div class="flex gap-2">
        <flux:date-picker wire:model="appointmentDate" />
        <flux:time-picker wire:model="appointmentTime" />
    </div>
</flux:field>

​
Time Formats

​
12-Hour Format

9:00 AM
12:30 PM
6:45 PM

​
24-Hour Format

09:00
12:30
18:45

​
Validation

Validate time values in Livewire: 
protected $rules = [
    'startTime' => 'required|date_format:H:i',
    'endTime' => 'required|date_format:H:i|after:startTime',
];

​
Accessibility

  • ARIA labels for time selection
  • Keyboard navigation (arrows, Enter)
  • Screen reader announcements
  • Focus management
  • Proper input semantics
Use Time Picker with Date Picker for complete datetime selection interfaces.

Build docs developers (and LLMs) love

Get started for freeTalk to us