Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building a Date Picker with Livewire v4

Create a custom date picker component.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build a date picker with Alpine.js.

Component

blade
<div x-data="{ open: false }" class="relative">
    <input 
        type="text" 
        wire:model="date"
        @focus="open = true"
        readonly
    >
    
    <div x-show="open" @click.away="open = false">
        <input 
            type="date"
            wire:model.live="date"
            @change="open = false"
        >
    </div>
</div>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read