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.
The datetime picker is an easy-to-use component that can greatly enhance your project.
1<span class="text-sm dark:text-gray-400">2 Model: {{ $model1 }}3</span>4 5<x-datetime-picker6 wire:model.live="model1"7 label="Appointment Date"8 placeholder="Appointment Date"9/>
You can customize the format assigned to the input value within the datetime picker.
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/>
You also have the option to tailor the date and time format for user display.
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/>
Additionally, there's an option to configure the datetime picker without specifying a timezone.
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-timezone10/>
Another feature within the datetime picker component is the ability to choose both a start and end date and time.
- System Time: 2024-10-06 19:40:11 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 PM12 </li>13 14 <li>15 <b>Model:</b> {{ $model5 }}16 </li>17</ul>18 19<x-datetime-picker20 wire:model.live="model5"21 label="Appointment Date"22 placeholder="Appointment Date"23 without-timezone24 :min="now()->subDays(7)->hours(12)->minutes(30)"25 :max="now()->addDays(7)->hours(12)->minutes(30)"26/>
The datetime picker component also allows you to select multiple dates.
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-timezone10 multiple11/>
The datetime picker component also allows you to set the start of the week.
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-timezone11/>
The datetime picker component also allows you to disable specific dates.
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-timezone10 :disabled-dates='["2021-05-21", "2021-05-20"]'11/>
The datetime picker component also allows you to disable specific years.
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-timezone10 :disabled-years="[2020, 2022]"11/>
The datetime picker component also allows you to disable specific months.
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-timezone10 :disabled-months="[3, 5]"11/>
The datetime picker component also allows you to disable specific weekdays.
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-timezone10 :disabled-weekdays="[0, 1]"11/>
The datetime picker component can be configured to require confirmation before updating the model.
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-timezone10 requires-confirmation11/>
Read more about day.js formats.