TALL kit

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

Total minutes: 90

Total time: 1:30

<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

"06:29"

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