Date & Time
Time Input
The time input component allows users to select hours and seconds, providing a convenient and intuitive interface for time selection.
<x-input.time x-data/>
Installation
Make sure to include the required TALL kit plugins to enable time input functionality.
import {
spinbutton,
time,
} from "@tall-kit/plugins"
Alpine.plugin(spinbutton)
Alpine.plugin(time)
Usage
Different value formats with Alpine model
<div class="grid grid-cols-2 gap-4" x-data="{
minutes: 90,
time: '1:30'
}">
<div><x-input.time by="total-minutes" x-model="minutes"/></div>
<span x-text="'Total minutes: ' + minutes"></span>
<div><x-input.time x-model="time"/></div>
<span x-text="'Total time: ' + time"></span>
</div>
With Livewire defered model
"15:24"
<div class="grid grid-cols-2 gap-4">
<div wire:ignore x-data="{
value: @entangle('value').defer
}">
<x-input.time x-model="value"/>
</div>
<x-button wire:click="$refresh">Save time</x-button>
<div>
<x-loader wire:loading/>
<span wire:loading.remove>@json($value)</span>
</div>
</div>