Form Time

>= v1.20

Form time component.

Time, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->form('time')
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Basic Usage

<x-time />

# Label & Hint

Time

Select the hour

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

# Available Formats

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

# Min & Max Hours and Minutes

Min Hour: 5, Max Hour: 10

Min Minute: 30, Max Minute: 45

<!-- 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.

# 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

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

# Invalidate

An option to not show validation error message.

<x-time invalidate />