Time Picker

Basic Usage

The TimePicker field renders a time selection input. By default, it uses a 12-hour format with AM/PM.

Example

Start time

2:30 PM

TimePicker::make('start_time');

24-Hour Format

Switch to 24-hour format:

Example

Start time

14:30

TimePicker::make('start_time')->use24HourTime();

This also updates the PHP field's display format from h:mm A to HH:mm. Direct standalone props should pass display-format="HH:mm" explicitly instead of relying on serialized PHP field config.

Steps

Minute Step

Set the increment for minute selection:

Example

Appointment

10:30 AM

TimePicker::make('appointment')->minuteStep(15);   // 00, 15, 30, 45
TimePicker::make('meeting')->minuteStep(30);        // 00, 30

Hour Step

Set the increment for hour selection:

Example

Shift start

08:00

TimePicker::make('shift_start')
    ->use24HourTime()
    ->hourStep(2); // 00, 02, 04, 06, ...

In the default 12-hour picker, the same step starts at 1, so hourStep(2) shows 1, 3, 5, ....

Second Step

Set the increment for second selection (requires showSeconds):

Example

Precise time

2:30:15 PM

TimePicker::make('precise_time')
    ->showSeconds()
    ->secondStep(15);   // 00, 15, 30, 45

Step methods only change the visible picker choices. Pass positive increments; direct Vue and React props normalize zero or negative steps back to 1. Step methods do not add Laravel validation such as "minutes must be divisible by 15", so add rules() or a custom rule if the server must reject submitted times outside your step pattern.

Show Seconds

Include a seconds selector. This updates the value format to HH:mm:ss and the display format accordingly.

Example

Timestamp

2:30:15 PM

TimePicker::make('timestamp')->showSeconds();

Min and Max Time

Constrain the picker options to a time window and reject out-of-window submitted values during backend validation:

Example

Appointment

1:30 PM

TimePicker::make('appointment')
    ->minTime('09:00')
    ->maxTime('17:00');

The footer Now action uses the same picker options. It resolves the current clock time to the closest visible hour, minute, and second option, then disables itself when that value would fall outside the minTime() and maxTime() window.

Clearable

Allow the user to clear the selected time:

Example

Reminder

4:45 PM

TimePicker::make('reminder')->clearable();

Display and Value Format

Customize how the time is displayed and submitted:

Example

Start time

02.30 PM

TimePicker::make('start_time')
    ->displayFormat('hh.mm A')    // What the user sees: 02.30 PM
    ->valueFormat('HH.mm');       // What gets submitted: 14.30

Token	Description	Example
HH	24-hour hour (padded)	00-23
H	24-hour hour	0-23
hh	12-hour hour (padded)	01-12
h	12-hour hour	1-12
mm	Minutes (padded)	00-59
ss	Seconds (padded)	00-59
A	AM/PM	AM, PM
a	am/pm	am, pm

Defaults: display format h:mm A, value format HH:mm. In PHP field config, use24HourTime() changes the display format to HH:mm, and showSeconds() updates both formats to include seconds. Direct standalone props should pass the matching display-format and value-format props explicitly.

Configured min, max, and disabled-value constraints make backend validation use the submitted valueFormat(). Step methods still remain UI-only.

Placeholder

Set the empty trigger text. The default is Select time:

TimePicker::make('start_time')->placeholder('Choose a start time');

Disabled Hours, Minutes, and Seconds

Disable specific values in the picker:

// Disable lunch hour and after-hours
TimePicker::make('meeting_time')
    ->disabledHours([0, 1, 2, 3, 4, 5, 6, 7, 12, 18, 19, 20, 21, 22, 23]);

// Disable specific minutes
TimePicker::make('schedule')
    ->disabledMinutes([15, 45]);

// Disable specific seconds (requires showSeconds)
TimePicker::make('precise_time')
    ->showSeconds()
    ->disabledSeconds([0, 30]);

Hours are specified in 24-hour format (0-23), minutes and seconds in 0-59. The footer Now action is disabled when the current resolved picker value uses a disabled hour, minute, or second. Submitted values are rejected by backend validation too. Disabled seconds are enforced only when showSeconds() is enabled.

Footer Actions

Every TimePicker dropdown includes a Now action. It selects the current clock time using the closest visible picker options, so minuteStep(), hourStep(), and secondStep() are respected. The Now action is disabled when the current resolved value is outside the configured min/max window or uses a disabled hour, minute, or second.

Calling clearable() also adds a footer Clear action and a trigger clear button once the field has a value.

All shared field methods remain available. See Form Class, Model Binding, Validation, Conditional Visibility, Authorization, and Styling.

Using the Component Directly

TimePicker is exported from each stack's components subpath. Vue uses v-model; React uses controlled value and onValueChange.

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { TimePicker } from '@inertiaui/form-vue/components'

const followUpAt = ref<string | null>('09:30:15')
const error = ref<string | null>(null)
const saving = ref(false)

const fieldParts = {
    dropdown: 'max-h-64',
    option: 'font-medium',
    selectedOption: 'bg-blue-50',
}

const trackBlur = () => {}
</script>

<template>
    <TimePicker
        v-model="followUpAt"
        id="follow-up-time"
        name="follow_up_at"
        label="Follow-up time"
        help="Business hours only."
        placeholder="Choose a time"
        :error="error"
        :invalid="!!error"
        required
        :precognitive="false"
        :disabled="saving"
        use-24-hour-time
        :hour-step="1"
        :minute-step="15"
        show-seconds
        :second-step="15"
        min-time="08:00:00"
        max-time="18:00:00"
        :disabled-hours="[0, 1, 2, 3, 4, 5, 6, 22, 23]"
        :disabled-minutes="[5, 55]"
        :disabled-seconds="[0, 30]"
        clearable
        display-format="HH:mm:ss"
        value-format="HH:mm:ss"
        badge="Office"
        badge-class="bg-zinc-100 text-zinc-700"
        label-trailing="Required"
        label-trailing-class="text-zinc-500"
        tooltip="Unavailable times are disabled in the picker."
        help-position="below"
        layout="stacked"
        control-position="start"
        label-class="font-medium"
        help-class="text-zinc-500"
        error-class="text-red-600"
        wrapper-class="max-w-sm"
        control-class="bg-white"
        class="font-medium"
        :part-classes="fieldParts"
        :label-sr-only="false"
        title="Choose follow-up time"
        data-testid="follow-up-time"
        @blur="trackBlur"
    />
</template>

React

import { useState } from 'react'
import { TimePicker } from '@inertiaui/form-react/components'

const fieldParts = {
    dropdown: 'max-h-64',
    option: 'font-medium',
    selectedOption: 'bg-blue-50',
}

export default function FollowUpTimePicker() {
    const [followUpAt, setFollowUpAt] = useState<string | null>('09:30:15')
    const [error] = useState<string | null>(null)
    const [saving] = useState(false)
    const trackBlur = () => {}

    return (
        <TimePicker
            value={followUpAt}
            onValueChange={setFollowUpAt}
            id="follow-up-time"
            name="follow_up_at"
            label="Follow-up time"
            help="Business hours only."
            placeholder="Choose a time"
            error={error}
            invalid={Boolean(error)}
            required
            precognitive={false}
            disabled={saving}
            use24HourTime
            hourStep={1}
            minuteStep={15}
            showSeconds
            secondStep={15}
            minTime="08:00:00"
            maxTime="18:00:00"
            disabledHours={[0, 1, 2, 3, 4, 5, 6, 22, 23]}
            disabledMinutes={[5, 55]}
            disabledSeconds={[0, 30]}
            clearable
            displayFormat="HH:mm:ss"
            valueFormat="HH:mm:ss"
            badge="Office"
            badgeClass="bg-zinc-100 text-zinc-700"
            labelTrailing="Required"
            labelTrailingClass="text-zinc-500"
            tooltip="Unavailable times are disabled in the picker."
            helpPosition="below"
            layout="stacked"
            controlPosition="start"
            labelClass="font-medium"
            helpClass="text-zinc-500"
            errorClass="text-red-600"
            wrapperClass="max-w-sm"
            controlClass="bg-white"
            class="font-medium"
            partClasses={fieldParts}
            labelSrOnly={false}
            title="Choose follow-up time"
            data-testid="follow-up-time"
            onBlur={trackBlur}
        />
    )
}

Native attributes and listeners target the trigger element. See Native Attributes And Events.