V2? Coming soon! New components and lots of improvements.

Powerful suite of Blade components for TALL Stack apps.

Form Time

>= v1.20

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}`)"/>

An option to not show validation error message.

:

<x-time invalidate />

Code highlighting provided by Torchlight