Logo Beartropy UI
Time Picker
The x-bt-time-picker component allows users to select a time value.
It supports min/max constraints, custom intervals, and various states like disabled or readonly.

Basic Usage

A simple time picker with a label and placeholder. 

1<x-bt-time-picker
2    label="Select Time"
3    placeholder="00:00"
4/>

Format & Interval

You can customize the time format (default is H:i) and the step interval for the time selection.
In this example, the interval is set to 15 minutes.

Select a time in 15-minute intervals 

1<x-bt-time-picker
2    label="Meeting Time"
3    format="H:i"
4    interval="15"
5    hint="Select a time in 15-minute intervals"
6/>

Min & Max Constraints

Restrict the selectable time range using min and max props.
Browsers that support type="time" will enforce these constraints.

Open from 9:00 AM to 5:00 PM 

1<x-bt-time-picker
2    label="Business Hours"
3    min="09:00"
4    max="17:00"
5    value="09:00"
6    hint="Open from 9:00 AM to 5:00 PM"
7/>

States

The component supports standard states like disabled, readonly, and error validation.

This time is not available 

 1<div class="grid gap-4">
 2    <x-bt-time-picker
 3        label="Disabled Input"
 4        value="12:00"
 5        disabled
 6    />
 7 
 8    <x-bt-time-picker
 9        label="Readonly Input"
10        value="14:30"
11        readonly
12    />
13 
14    <x-bt-time-picker
15        label="With Error"
16        custom-error="This time is not available"
17    />
18</div>

Props

Prop Type Default Description
name
string|null null
The name attribute for the input element.
label
string|null null
Label text displayed above the input.
value
string|null null
The current value of the input.
min
string|null null
The minimum allowed time value (e.g., "09:00").
max
string|null null
The maximum allowed time value (e.g., "17:00").
format
string 'H:i'
The time format to use.
interval
int|string 1
The step interval in minutes/seconds for the time picker.
placeholder
string|null null
Placeholder text for the input.
hint
string|null null
Helper text displayed below the input.
disabled
bool false
Disables the input, preventing user interaction.
readonly
bool false
Makes the input read-only.
clearable
bool true
Whether the input can be cleared (if supported by the browser/implementation).
customError
string|null null
Force display of an error message.
Code highlighting provided by Torchlight