TallStackUI v2 is fully compatible with Livewire v4. We are now focused on TallStackUI v3, which will bring many new features!'

Powerful suite of Blade components for TALL Stack apps.

Form Time

Form time component.

:

<x-time />
Select the hour
:

<x-time label="Time" hint="Select the hour" />
:

:
<!-- 12-hour format -->
<x-time />
 
<!-- 24-hour format -->
<x-time format="24" />
:

:

<!-- Hours -->
<x-time :min-hour="5" :max-hour="10" />
 
<!-- Minutes -->
<x-time :min-minute="30" :max-minute="45" />

Due to the way the component works, the min and max hours/minutes do not limit the range, but rather the post-selected value when time is selected.

An option to adjust the time to the current one without the possibility of clearing the input.

:
<x-time required />

An option to easily select the current time.

:
<x-time helper />
:

<x-time :step-hour="3" :step-minute="15" />
:

<x-time x-on:hour="alert(`Hour Selected: ${$event.detail.hour}`)"
x-on:minute="alert(`Minute Selected: ${$event.detail.minute}`)"
x-on:interval="alert(`Interval Changed: ${$event.detail.interval}`)"/>

Code highlighting provided by Torchlight