<x-bt-datetime />
Customize via presets →
Shared presets
x-bt-input component.
Basic Usage
A simple date picker with a label. Click the trigger to open the calendar dropdown.
1<x-bt-datetime label="Birthday" />Date & Time
Enable show-time to add a time wheel after date selection. The stored value includes time: YYYY-MM-DD HH:mm.
1<x-bt-datetime label="Appointment" :show-time="true" />Date Range
Enable :range="true" to select a start and end date. The value becomes an object with start and end properties.
Basic Range
1<x-bt-datetime label="Trip Dates" :range="true" />Range with Time
Combine :range="true" with :show-time="true" for full datetime range selection.
1<x-bt-datetime label="Booking" :range="true" :show-time="true" />Min & Max Dates
Restrict selectable dates. Days outside the range are disabled in the calendar.
1<x-bt-datetime label="This Year Only" min="2025-01-01" max="2025-12-31" />Display Format
Customize the trigger display format using tokens. The stored value format is controlled by the format prop.
1<x-bt-datetime label="Default Format" value="2025-06-15" />2<x-bt-datetime label="Dash Separator" format-display="{d}-{m}-{Y}" value="2025-06-15" />3<x-bt-datetime label="Short Month" format-display="{d} {M} {Y}" value="2025-06-15" />4<x-bt-datetime label="Full Month" format-display="{d} {MMMM} {Y}" value="2025-06-15" />Available tokens
{d} (day), {m} (month number), {Y} (year), {M} (short month name), {MMMM} (full month name), {H} (hour), {i} (minute).
Fill & Outline
Toggle between border-only (default) and tinted background trigger styles.
1<x-bt-datetime label="Outline (default)" value="2025-06-15" />2<x-bt-datetime label="Filled" fill value="2025-06-15" />Sizes
Inherited from the input trigger base. Default is md.
1<x-bt-datetime xs label="Extra Small" />2<x-bt-datetime sm label="Small" />3<x-bt-datetime label="Medium (default)" />4<x-bt-datetime lg label="Large" />5<x-bt-datetime xl label="Extra Large" />Colors
Colors affect the calendar day highlight, selected/range states, time wheel accent, and trigger border on focus.
1<x-bt-datetime label="Default (primary)" value="2025-06-15" />2<x-bt-datetime blue label="Blue" value="2025-06-15" />3<x-bt-datetime red label="Red" value="2025-06-15" />4<x-bt-datetime green label="Green" value="2025-06-15" />5<x-bt-datetime purple label="Purple" value="2025-06-15" />6<x-bt-datetime emerald label="Emerald" value="2025-06-15" />All available colors
primary, beartropy, red, blue, green, yellow, purple, pink, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, rose, fuchsia, slate, stone, zinc, neutral.
Use the color prop or magic attributes: <x-bt-datetime blue />.
Clearable
A clear button is shown by default when a value is selected. Disable it with :clearable="false".
1<x-bt-datetime label="Clearable (default)" value="2025-06-15" />2<x-bt-datetime label="Not Clearable" :clearable="false" value="2025-06-15" />Disabled
Prevents opening the calendar or changing the value.
1<x-bt-datetime label="Locked" :disabled="true" value="2025-06-15" />Validation Errors
Errors are automatically detected from the Laravel validation error bag using the wire:model name. You can also force an error with custom-error.
Auto Validation
Submit without selecting a date to see the error. The border turns red and the error message appears below.
1<x-bt-datetime id="datetime-validated" wire:model="validatedDate" label="Event Date" />2<x-bt-button wire:click="submitDate" solid blue class="mt-3">Submit</x-bt-button>Custom Error
Force an error state regardless of validation using custom-error.
Please select a valid date.
1<x-bt-datetime label="Date" :custom-error="'Please select a valid date.'" />Help Text
Choose a date within the allowed range.
Format: DD/MM/YYYY
1<x-bt-datetime label="Date" help="Choose a date within the allowed range." />2<x-bt-datetime label="Date" hint="Format: DD/MM/YYYY" />Livewire Integration
Deferred Binding
1<x-bt-datetime id="datetime-deferred" wire:model="deferredDate" label="Deferred Binding" />Live Binding
Use wire:model.live to update the Livewire property immediately on change.
Selected: none
1<x-bt-datetime id="datetime-live" wire:model.live="liveDate" label="Live Binding" />2<p class="text-sm text-gray-500 mt-2">Selected: <strong>{{ $liveDate ?? 'none' }}</strong></p>Range with Livewire
For range selects, the Livewire property receives an object with start and end keys.
Selected: null
1<x-bt-datetime id="datetime-range-lw" wire:model.live="dateRange" :range="true" label="Date Range" />2<p class="text-sm text-gray-500 mt-2">Selected: <strong>{{ json_encode($dateRange) ?: 'none' }}</strong></p>Vanilla Form
When no wire:model is present, a hidden <input> is rendered automatically for standard form submission.
1<x-bt-datetime label="Event Date" name="event_date" value="2025-06-15" />Real-World Example
An event scheduling form combining datetime pickers with an input and a button.
1<div class="max-w-md space-y-4"> 2 <x-bt-input label="Event Name" placeholder="e.g. Team Standup" icon="calendar" /> 3 <x-bt-datetime 4 label="Start" 5 :show-time="true" 6 min="2025-01-01" 7 emerald 8 placeholder="Pick start date & time..." 9 />10 <x-bt-datetime11 label="End"12 :show-time="true"13 min="2025-01-01"14 emerald15 placeholder="Pick end date & time..."16 />17 <x-bt-button solid emerald class="w-full">Schedule Event</x-bt-button>18</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
string|null
|
null
|
Label text above the input.
|
placeholder
|
string|null
|
auto
|
Placeholder text when no date is selected. Defaults to "Select date..." or "Select range..." depending on mode.
|
value
|
mixed
|
null
|
Initial value. Use
YYYY-MM-DD for dates or YYYY-MM-DD HH:mm when time is enabled.
|
color
|
string|null
|
config default
|
Color preset name. Supports magic attributes:
<x-bt-datetime blue />.
|
id
|
string|null
|
auto-generated
|
Component ID. Auto-generates as
beartropy-datetime-{uniqid} when not provided.
|
name
|
string|null
|
falls back to id
|
Input name for form submission.
|
min
|
string|null
|
null
|
Minimum selectable date in
YYYY-MM-DD format.
|
max
|
string|null
|
null
|
Maximum selectable date in
YYYY-MM-DD format.
|
range
|
bool
|
false
|
Enable date range selection. The value becomes an object with
start and end properties.
|
showTime
|
bool
|
false
|
Enable time wheel after date selection. The stored value includes time:
YYYY-MM-DD HH:mm.
|
format
|
string
|
Y-m-d
|
PHP date format for the stored/submitted value.
|
formatDisplay
|
string|null
|
auto
|
Display format for the trigger. Uses tokens:
{d}, {m}, {Y}, {M}, {MMMM}, {H}, {i}.
|
disabled
|
bool
|
false
|
Disables interaction, preventing opening the calendar.
|
readonly
|
bool
|
false
|
Readonly state. Displays the value but prevents changes.
|
clearable
|
bool
|
true
|
Show a clear button when a value is selected.
|
customError
|
mixed
|
null
|
Custom error message that bypasses the validation bag.
|
help
|
string|null
|
null
|
Help text displayed below the input.
|
hint
|
string|null
|
null
|
Alias for
help.
|