maryUI v1 is deprecated! Upgrade to v2 →

Date Time

Native HTML

If you have no constraints regarding dates' selection, just stick with this approach, which renders nice natively on all devices and covers most of the use cases.

For advanced date picker see the Date Picker component.
<x-datetime label="My date" wire:model="myDate" icon="o-calendar" />
 
{{-- Notice `type="datetime-local"` --}}
<x-datetime label="Date + Time" wire:model="myDate" icon="o-calendar" type="datetime-local" />
 
{{-- Notice `type="time"` --}}
<x-datetime label="Time" wire:model="myDate" icon="o-calendar" type="time" />

maryUI v1
Sponsor