Logo Beartropy

Date & Datetime Picker

The x-datetime component is a modern, elegant date and datetime picker:
Supports date & time, range selection, min/max, validation, presets & themes, dark mode, and seamless Livewire/Alpine integration.
All features are easily combinable for a powerful UX.
You can customize this component

Basic Usage

Basic Usage

  • Single date or range selection with range prop.
  • Add show-time for hour/minute selectors.
  • Use wire:model for instant Livewire sync.
  • format-display customizes how the date appears in the input.
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
blade 
            
 1<x-datetime label="Pick a date" wire:model="date" />
 2 
 3<x-datetime
 4    label="Date with time"
 5    show-time
 6    wire:model="datetime"
 7    format-display="{d}/{m}/{Y} {H}:{i}"
 8/>
 9 
10<x-datetime
11    label="Date range"
12    range
13    wire:model="period"
14/>
15 
16<x-datetime
17    label="Range with time"
18    range
19    show-time
20    wire:model="period"
21    format-display="{d}/{m}/{Y} {H}:{i}"
22/>

Advanced Features

Advanced Features

  • min and max restrict selectable dates.
  • weekdays disables weekends (only weekdays selectable).
  • Customize placeholder as you wish.
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
blade 
            
 1<x-datetime
 2    label="Min/Max Example"
 3    min="2024-08-01"
 4    max="2024-08-31"
 5    wire:model="dateLimited"
 6/>
 7 
 8<x-datetime
 9    label="Weekdays Only"
10    weekdays
11    wire:model="weekdaysOnly"
12/>
13 
14<x-datetime
15    label="Custom Placeholder"
16    placeholder="Pick birthday…"
17    wire:model="birthday"
18/>

Presets & Colors

Presets & Colors

  • Use Tailwind-style color presets or customize your own.
  • Supports dark & light mode out of the box.
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
blade 
            
1<x-datetime label="Default" wire:model="date" />
2<x-datetime blue label="Blue" wire:model="date" />
3<x-datetime emerald label="Emerald" wire:model="date" />
4<x-datetime rose label="Rose" wire:model="date" />
5<x-datetime amber label="Amber" wire:model="date" />
6<x-datetime violet label="Violet" wire:model="date" />

Filled

  • Use Tailwind-style color presets or customize your own.
  • Supports dark & light mode out of the box.
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
LunMarMiéJueVieSábDom
blade 
            
1<x-datetime fill label="Default" wire:model="date" />
2<x-datetime fill blue label="Blue" wire:model="date" />
3<x-datetime fill emerald label="Emerald" wire:model="date" />
4<x-datetime fill rose label="Rose" wire:model="date" />
5<x-datetime fill amber label="Amber" wire:model="date" />
6<x-datetime fill violet label="Violet" wire:model="date" />

Validation & Error States

Validation with Livewire

  • Fully compatible with wire:model for instant validation.
  • Shows red border and error message automatically if validation fails.
  • Date range returns object: {start: ..., end: ...}. Single date returns string.
LunMarMiéJueVieSábDom

Date is required

blade 
            
1// In your Livewire component:
2public $date = null;
3protected $rules = ['date' => 'required|date'];
4 
5<x-datetime
6    label="Date required"
7    wire:model="date"
8    clearable
9/>

Date Formats & Model Values

Date format tips

- The picker accepts and outputs dates in most Laravel/Eloquent formats: Y-m-d, Y-m-d H:i, timestamps, or Carbon instances.
- For ranges, the model value is an object: { start: 'YYYY-MM-DD', end: 'YYYY-MM-DD' } (or with time if show-time is enabled).
- Use format-display to control how the value is displayed in the input (e.g., {d}/{m}/{Y} {H}:{i}).
Code highlighting provided by Torchlight