TallStackUI 4.0 is here! Seven new components and thousand of improvements. See what's new .

Powerful suite of Blade components for TALL Stack apps

Form Time

Form time component.

# Basic Usage 

<x-time />

# Label & Hint

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

# Readonly & Disabled 

<x-time label="Readonly" value="10:00 AM" readonly />
<x-time label="Disabled" value="10:00 AM" disabled />

# Scroll & Drag
NEW

An option to change the time using the mouse scroll or drag.

Click in the input field and use the mouse wheel or drag (under the numbers) up and down to change the time 
<!--
Scroll or drag over the sliders and over the numbers.
Both respect the step and the min/max bounds.
-->
 
<x-time :step-minute="5" />

# Available Formats 

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

# Min & Max Hours and Minutes 

<!-- Hours -->
<x-time :min-hour="5" :max-hour="10" />
 
<!-- Minutes -->
<x-time :min-minute="30" :max-minute="45" />
Starting from v4, the min/max hour and minute will control how long the range are.

# Required

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

<x-time required />

# Helper

An option to easily select the current time. 

<x-time helper />

# Step Hour & Minute 

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

# Footer Slot 

<x-time>
    <x-slot:footer>
        Footer Slot
    </x-slot:footer>
</x-time>

# Events 

<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}`)"/>
Event Detail Fired when
hour { hour } An hour is selected
minute { minute } A minute is selected
interval { interval } AM/PM is changed
current { time: { hour, minute, interval } } The current time is applied
clear { time } The value is cleared

Code highlighting provided by Torchlight