Logo Beartropy UI
Datetime
The x-bt-datetime component is a powerful and accessible date/time picker.
It supports single date, date ranges, time selection, and min/max constraints.
Fully compatible with Livewire via wire:model and ready for localization with the locale prop.

Basic Date Picker

A simple single-date picker with label.
If no placeholder is provided, it uses a localized default based on the locale (e.g. Spanish or English). 

1<x-bt-datetime
2    name="birthday"
3    label="Birthday"
4/>

Date & Time Picker

Enable time selection with show-time and customize the internal value format (format) and display format (format-display). 

1<x-bt-datetime
2    name="meeting_at"
3    label="Meeting date & time"
4    show-time
5    format="Y-m-d H:i"
6    format-display="{d}/{m}/{Y} {H}:{i}"
7/>

Date Range Picker

Use range to allow selecting a start and end date (optionally with time).
You can also restrict the selectable dates with min and max. 

1<x-bt-datetime
2    name="created_between"
3    label="Created between"
4    range
5    show-time
6    min="2025-01-01"
7    max="2025-12-31"
8/>

Livewire Integration

Bind the picker directly to Livewire using wire:model or wire:model.live.
Validation errors will be displayed automatically via the underlying input + field-help component.

Selected range: null 

 1{{-- In your Blade view --}}
 2{{-- $dateRange is a public property in your Livewire component --}}
 3<p class="mb-2">
 4    Selected range:
 5    <span class="{{ $dateRange ? 'text-emerald-500' : 'text-red-500' }}">
 6        {{ json_encode($dateRange) ?: 'No range selected' }}
 7    </span>
 8</p>
 9 
10<x-bt-datetime
11    label="Filter by date range"
12    range
13    wire:model.live="dateRange"
14/>

Outline colors

You can apply the outline prop to use an outlined style for the input trigger. 

 1<x-bt-datetime name="birthday" label="Birthday" fill />
 2<x-bt-datetime gray name="birthday" label="Birthday" fill />
 3<x-bt-datetime red name="birthday" label="Birthday" fill />
 4<x-bt-datetime orange name="birthday" label="Birthday" fill />
 5<x-bt-datetime amber name="birthday" label="Birthday" fill />
 6<x-bt-datetime yellow name="birthday" label="Birthday" fill />
 7<x-bt-datetime lime name="birthday" label="Birthday" fill />
 8<x-bt-datetime green name="birthday" label="Birthday" fill />
 9<x-bt-datetime emerald name="birthday" label="Birthday" fill />
10<x-bt-datetime teal name="birthday" label="Birthday" fill />
11<x-bt-datetime cyan name="birthday" label="Birthday" fill />
12<x-bt-datetime sky name="birthday" label="Birthday" fill />
13<x-bt-datetime blue name="birthday" label="Birthday" fill />
14<x-bt-datetime indigo name="birthday" label="Birthday" fill />
15<x-bt-datetime violet name="birthday" label="Birthday" fill />
16<x-bt-datetime purple name="birthday" label="Birthday" fill />
17<x-bt-datetime pink name="birthday" label="Birthday" fill />
18<x-bt-datetime rose name="birthday" label="Birthday" fill />
19<x-bt-datetime slate name="birthday" label="Birthday" fill />
20<x-bt-datetime zinc name="birthday" label="Birthday" fill />

Fill colors

You can apply the fill prop to use an filled style for the input trigger. 

 1<x-bt-datetime name="birthday" label="Birthday" fill />
 2<x-bt-datetime gray name="birthday" label="Birthday" fill />
 3<x-bt-datetime red name="birthday" label="Birthday" fill />
 4<x-bt-datetime orange name="birthday" label="Birthday" fill />
 5<x-bt-datetime amber name="birthday" label="Birthday" fill />
 6<x-bt-datetime yellow name="birthday" label="Birthday" fill />
 7<x-bt-datetime lime name="birthday" label="Birthday" fill />
 8<x-bt-datetime green name="birthday" label="Birthday" fill />
 9<x-bt-datetime emerald name="birthday" label="Birthday" fill />
10<x-bt-datetime teal name="birthday" label="Birthday" fill />
11<x-bt-datetime cyan name="birthday" label="Birthday" fill />
12<x-bt-datetime sky name="birthday" label="Birthday" fill />
13<x-bt-datetime blue name="birthday" label="Birthday" fill />
14<x-bt-datetime indigo name="birthday" label="Birthday" fill />
15<x-bt-datetime violet name="birthday" label="Birthday" fill />
16<x-bt-datetime purple name="birthday" label="Birthday" fill />
17<x-bt-datetime pink name="birthday" label="Birthday" fill />
18<x-bt-datetime rose name="birthday" label="Birthday" fill />
19<x-bt-datetime slate name="birthday" label="Birthday" fill />
20<x-bt-datetime zinc name="birthday" label="Birthday" fill />

Props

Prop Type Default Description
id
string auto-generated
Optional ID for the underlying input trigger. If not provided, an ID like datepicker-xxxxx is automatically generated.
name
string null
The input name attribute. Used for form submissions and when not bound via wire:model. If a Livewire model is present, it can override this internally.
label
string null
Text label displayed above the datetime picker.
value
string|array|null null
Initial value for the picker when not using Livewire. For ranges, this may be an array or a range-compatible value depending on your implementation.
min
string|null null
Minimum selectable date (and time). Typically a string in Y-m-d or Y-m-d H:i:s format.
max
string|null null
Maximum selectable date (and time). Typically a string in Y-m-d or Y-m-d H:i:s format.
disabled
bool false
Disables the trigger input, preventing the user from opening or changing the picker.
readonly
bool false
Makes the field read-only while still displaying the selected value.
placeholder
string|null auto (localized)
Custom placeholder when no date is selected.
If omitted, a sensible default is generated depending on locale and whether range is enabled.
hint
string|null null
Hint text shown below the field via the field-help component.
customError
string|null null
Custom error message to force the field into an error state, bypassing automatic validation errors.
locale
string es
Locale used for placeholder text and potential localization concerns. Accepted values typically include es, en, etc.
range
bool false
Enables range selection (start and end date). When true, the UI allows selecting a date range.
initialValue
string|array|null null
Optional initial internal value for the picker separate from value. Useful when you need to bootstrap the Alpine-powered picker with a custom structure.
format
string Y-m-d
Base PHP date format used for the stored/submitted value (e.g. Y-m-d or Y-m-d H:i).
formatDisplay
string {d}/{m}/{Y} {H}:{i}
Display format used in the trigger label. Uses tokens like {d}, {m}, {Y}, {H}, {i} to build the visible string.
showTime
bool false
When true, displays time selectors (hour and minute) for the selected date or for each end of the range.
clearable
bool true
When enabled, shows a small clear icon that resets the selected value (including range and time parts).
wire:model
Livewire binding null
Livewire binding for the current value or range. Use wire:model, wire:model.defer, or wire:model.live for fully reactive forms.
Code highlighting provided by Torchlight