Neura UI

Loading…

Logo
Neura UI
All pages 108

Time Picker

Pick a time, a From – To range, or several of either, from hour and minute columns. Built for opening hours, shifts and reminders.

Basic Usage

A single time. The value is a 24-hour `HH:mm` string whatever clock is shown.
blade
Reminder 
<neura::time-picker wire:model="remindAt" />
<!-- $remindAt will be '09:30' -->

From – To

`range` puts From and To side by side in one field. To never goes before From, and moving From keeps the length of the slot.
blade
Shift 
<neura::time-picker range wire:model="shift" />
<!-- $shift will be ['start' => '09:00', 'end' => '18:00'] -->

Several Slots

Add `multiple` to let users add and remove slots in the same field. With `range`, each slot is a From – To pair. Other keys of a slot are kept, so rows that carry a weekday or an id can be bound as they are.
blade
Opening hours 
[
    {
        "start": "09:00",
        "end": "12:00"
    },
    {
        "start": "14:00",
        "end": "18:00"
    }
]
<neura::time-picker range multiple wire:model="openingHours" />
<!-- $openingHours will be [['start' => '09:00', 'end' => '12:00'], ['start' => '14:00', 'end' => '18:00']] -->

<neura::time-picker multiple wire:model="medicationTimes" />
<!-- $medicationTimes will be ['08:00', '20:00'] -->

Clock, Step and Bounds

The clock follows the locale (12 hours with AM / PM in English, 24 hours in French) unless `hour-cycle` sets it. `min` and `max` disable the times outside them.
blade
Delivery window 
<neura::time-picker range :hour-cycle="12" :minute-step="30" min="08:00" max="20:00" />

Size and Style

`size` scales the field and the columns together; `rounded` and `shadow` style the field and its popup. Without them, the picker follows `config('neura-kit.time-picker')`, whose `rounded` and `shadow` default to the global style. The date picker's time side uses the same size.
javascript 
<neura::time-picker size="sm" />
<neura::time-picker size="lg" rounded="xl" shadow="md" />

// config/neura-kit.php
'time-picker' => Config::timePicker([
    'default' => ['size' => 'sm', 'rounded' => 'md'],
]),

Props

Prop Type Default Description
range boolean false From – To in one field; the value becomes ['start' => …, 'end' => …]
multiple boolean false Several times (or slots with range), added and removed in the field
hourCycle 12|24|null null Clock format; null follows the locale
minuteStep int 5 Minutes listed: 1, 5, 10, 15 or 30
min / max string null Earliest and latest time (HH:mm)
locale string 'en' Formatting and the default clock
placeholder string 'Select time' / 'Select a time range' Shown while a field is empty
addLabel string 'Add a time' / 'Add a time slot' Label of the add button with multiple
size sm|md|lg config: md Field height and column density (pack: TimePicker\Size)
rounded / shadow string config: global Corners and shadow of the field and its popup
name string null Hidden inputs for plain form posts (name, name[start], name[][start] …)
disabled boolean false Disable the field