WireUI
Datetime Picker

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

Model:
1<x-datetime-picker
2 label="Appointment Date"
3 placeholder="Appointment Date"
4 wire:model.defer="normalPicker"
5/>
Model: 12-05-2021 13:40
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/>
Model:
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:
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: 2022-09-30 16:10:41 UTC
  • Min date: now() - 7 days, 12:30 PM
  • Max date: now() + 7 days, 12:30 PM
  • Model:
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
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

Read more about Dayjs formats.