Wire

UI
Datetime Picker

The datetime picker is a versatile component that enhances your project by providing an easy-to-use interface for selecting both date and time. It offers customization options for the input value format and user display format, allowing you to tailor it to your specific needs. Furthermore, the datetime picker allows you to operate without specifying a timezone, offering flexibility in various scenarios. Additionally, it enables you to set a start and end date and time, giving you precise control over the range of selections. You can also define the minimum and maximum hours as needed, making it a comprehensive and adaptable tool for managing date and time-related functionalities in your project.

Datetime Picker Default

The datetime picker is an easy-to-use component that can greatly enhance your project.

Model: 2021-05-22T02:48:00 
1<span class="text-sm dark:text-gray-400">
2    Model: {{ $model1 }}
3</span>
4 
5<x-datetime-picker
6    wire:model.live="model1"
7    label="Appointment Date"
8    placeholder="Appointment Date"
9/>
Datetime Custom Format

You can customize the format assigned to the input value within the datetime picker.

Model: 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model2 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model2"
 7    label="Appointment Date"
 8    placeholder="Appointment Date"
 9    parse-format="DD-MM-YYYY HH:mm"
10/>
Custom Display Format

You also have the option to tailor the date and time format for user display.

Model: 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model3 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model3"
 7    label="Appointment Date"
 8    placeholder="Appointment Date"
 9    display-format="DD-MM-YYYY HH:mm"
10/>
Without Timezone

Additionally, there's an option to configure the datetime picker without specifying a timezone.

Model: 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model4 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model4"
 7    label="Appointment Date"
 8    placeholder="Appointment Date"
 9    without-timezone
10/>
Min & Max dates

Another feature within the datetime picker component is the ability to choose both a start and end date and time.

  • System Time: 2024-12-23 19:59:31 UTC
  • Min date: now() - 7 days, 12:30 PM
  • Max date: now() + 7 days, 12:30 PM
  • Model: 
 1<ul class="mb-2 text-sm dark:text-gray-400">
 2    <li>
 3        <b>System Time:</b> {{ now() }} {{ now()->timezoneName }}
 4    </li>
 5 
 6    <li>
 7        <b>Min date:</b> now() - 7 days, 12:30 PM
 8    </li>
 9 
10    <li>
11        <b>Max date:</b> now() + 7 days, 12:30 PM
12    </li>
13 
14    <li>
15        <b>Model:</b> {{ $model5 }}
16    </li>
17</ul>
18 
19<x-datetime-picker
20    wire:model.live="model5"
21    label="Appointment Date"
22    placeholder="Appointment Date"
23    without-timezone
24    :min="now()->subDays(7)->hours(12)->minutes(30)"
25    :max="now()->addDays(7)->hours(12)->minutes(30)"
26/>
Multiple Dates

The datetime picker component also allows you to select multiple dates.

Model: [] 
 1<span class="text-sm dark:text-gray-400">
 2    Model: @json($model6)
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model6"
 7    label="Multiple Dates"
 8    placeholder="Appointment Date"
 9    without-timezone
10    multiple
11/>
Start Of Week

The datetime picker component also allows you to set the start of the week.

Model: 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model7 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model7"
 7    label="Start Of Week"
 8    placeholder="Appointment Date"
 9    start-of-week="1"
10    without-timezone
11/>
Disabled Dates

The datetime picker component also allows you to disable specific dates.

Model: 2021-05-22T02:48:00 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model8 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model8"
 7    label="Disabled Dates"
 8    placeholder="Appointment Date"
 9    without-timezone
10    :disabled-dates='["2021-05-21", "2021-05-20"]'
11/>
Disabled Years

The datetime picker component also allows you to disable specific years.

Model: 2021-05-22T02:48:00 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model9 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model9"
 7    label="Disabled Years"
 8    placeholder="Appointment Date"
 9    without-timezone
10    :disabled-years="[2020, 2022]"
11/>
Disabled Months

The datetime picker component also allows you to disable specific months.

Model: 2021-05-22T02:48:00 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model10 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model10"
 7    label="Disabled Months"
 8    placeholder="Appointment Date"
 9    without-timezone
10    :disabled-months="[3, 5]"
11/>
Disabled Weekdays

The datetime picker component also allows you to disable specific weekdays.

Model: 2021-05-22T02:48:00 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model11 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model11"
 7    label="Disabled Weekdays"
 8    placeholder="Appointment Date"
 9    without-timezone
10    :disabled-weekdays="[0, 1]"
11/>
Requires Confirmation

The datetime picker component can be configured to require confirmation before updating the model.

Model: 2021-05-22T02:48:00 
 1<span class="text-sm dark:text-gray-400">
 2    Model: {{ $model12 }}
 3</span>
 4 
 5<x-datetime-picker
 6    wire:model.live="model12"
 7    label="Requires Confirmation"
 8    placeholder="Appointment Date"
 9    without-timezone
10    requires-confirmation
11/>

Read more about day.js formats.

Datetime Picker API
Attention!
The Datetime Picker component receives all options from Input Component .
Prop Type Default Required
max Carbon|string|timestamp|null null false
min Carbon|string|timestamp|null null false
interval string|number 10 false
max-time number 24 false
min-time number 0 false
multiple boolean false false
timezone string null false
clearable boolean true false
right-icon string calendar false
shadowless boolean false false
time-format string 12 false
multiple-max number 0 false
parse-format string ISO8601 false
without-time boolean false false
without-tips boolean false false
allowed-dates array [] false
start-of-week number Carbon::SUNDAY false
user-timezone string real user timezone false
disabled-dates array [] false
disabled-years array [] false
display-format string localeFormat false
disabled-months array [] false
without-timezone boolean false false
disabled-weekdays array [] false
disable-past-dates string|boolean false false
without-time-seconds boolean false false
requires-confirmation boolean false false