V1 - WireUI Docs

# Default Datetime Picker
# Custom Datetime Format
# Custom Display Format
# Without Timezone
# Min & Max dates
# Min & Max times

The Datetime Picker component is able to change date and time using timezones or ignoring timezone diff. You can use automatic timezone or set a custom timezone to System Timezone or User Timezone

Default Datetime Picker

Model:

Appointment Date

1<x-datetime-picker
2    label="Appointment Date"
3    placeholder="Appointment Date"
4    wire:model.defer="normalPicker"
5/>

Custom Datetime Format

Model: 12-05-2021 13:40

Appointment Date

1<x-datetime-picker
2    label="Appointment Date"
3    placeholder="Appointment Date"
4    parse-format="DD-MM-YYYY HH:mm"
5    wire:model.defer="customFormat"
6/>

Custom Display Format

Model:

Appointment Date

1<x-datetime-picker
2    label="Appointment Date"
3    placeholder="Appointment Date"
4    display-format="DD-MM-YYYY HH:mm"
5    wire:model.defer="displayFormat"
6/>

Without Timezone

Model:

Appointment Date

1<x-datetime-picker
2    without-timezone
3    label="Appointment Date"
4    placeholder="Appointment Date"
5    wire:model="withoutTimezone"
6/>

Min & Max dates

System Time: 2024-12-21 14:29:42 UTC
Min date: now() - 7 days, 12:30 PM
Max date: now() + 7 days, 12:30 PM
Model:

Appointment Date

1<x-datetime-picker
2    label="Appointment Date"
3    placeholder="Appointment Date"
4    wire:model="model"
5    :min="now()->subDays(7)->hours(12)->minutes(30)"
6    :max="now()->addDays(7)->hours(12)->minutes(30)"
7/>

Min & Max Times

Appointment Date

1<x-datetime-picker
2    id="min-max-times-input"
3    without-timezone
4    label="Appointment Date"
5    placeholder="Appointment Date"
6    wire:model.defer="mixAndMaxTimes"
7    min-time="08:00"
8    max-time="18:00"
9/>

Datetime Picker Options

The datetime picker accepts all input options and slots

Options

Prop	Required	Default	Type	Available
clearable	false	true	boolean	boolean
without-tips	false	false	boolean	boolean
without-timezone	false	false	boolean	boolean
without-time	false	false	boolean	boolean
interval	false	10	string\|number	boolean
time-format	false	12	string	12\|24
timezone	false	UTC	string	All js available timezones
user-timezone	false	real user timezone	string	All js available timezones
parse-format	false	ISO8601	string	All dayjs formats
display-format	false	localeFormat	string	All dayjs formats
min	false	null	Carbon\|DateTimeInterface\|string\|timestamp\|null	All Suported Carbon::parse dates
max	false	null	Carbon\|DateTimeInterface\|string\|timestamp\|null	All Suported Carbon::parse dates