The time picker component offers a versatile and user-friendly way to select and customize the time display. It provides options for choosing between the standard 24-hour format and the AM/PM 12-hour format, along with the flexibility to set the minute interval to suit your specific needs. This component allows for precise and tailored time selection, making it a valuable tool for a wide range of applications.
Attention!
If you are using a model property bind (wire:model="appointment.datetime")
as datetime, you must set model as .defer because datetime cannot have empty time,
and automatically set 00:00 to time
In the time picker, you can choose the AM/PM format.
Model:
1<span class="dark:text-gray-400">Model: {{ $model1 }}</span>2 3<x-time-picker4 id="am-pm-time"5 wire:model.live="model1"6 label="AM/PM"7 placeholder="12:00 AM"8/>Furthermore, there's the option to utilize the 24-hour standard time format.
Model:
1<span class="dark:text-gray-400">Model: {{ $model2 }}</span>2 3<x-time-picker4 id="24-hours"5 wire:model.live="model2"6 label="24 Hours"7 placeholder="22:30"8 military-time9/>Another option is to use the time picker without seconds.
Model:
1<span class="dark:text-gray-400">Model: {{ $model3 }}</span>2 3<x-time-picker4 id="interval"5 wire:model.live="model3"6 label="AM/PM"7 placeholder="12:00 AM"8 without-seconds9/>
Attention!
The Time Picker component receives all options from
Input Component
.