How to implement datepicker in Livewire?

Question

I am learning Livewire and I want to use datepicker in my form. I found one helpful component from tailwindcomponents.com but not able to understand how to convert it into a livewire reusable component.

tailwindcomponents: https://tailwindcomponents.com/component/datepicker-with-tailwindcss-and-alpinejs

I have created a blade file in the view directory but not able to understand how HTML and JS code to be added. Also is it possible to access birthday value like wire:model="birthday"

<x-input.datepicker wire:model="birthday" id="datepicker"/>

Answer 1

I had the same issue, but also needed a time picker. Based on the answer by Upvote, I built a solution using Flatpickr.

Instead of installing Pikaday, install Flatpickr using the install guide.

Create a new component called views/components/input/date.blade.php and use something like this:

@props([
    'error' => null
])

<div
    x-data="{ value: @entangle($attributes->wire('model')) }"
    x-on:change="value = $event.target.value"
    x-init="flatpickr($refs.input, {enableTime: true, dateFormat: 'Z', defaultHour: 18, time_24hr: true })"
>
    <input 
        {{ $attributes->whereDoesntStartWith('wire:model') }} 
        x-ref="input"
        x-bind:value="value" 
        type="text" 
        class="pl-10 block w-full shadow-sm sm:text-lg bg-gray-50 border-gray-300 @if($error) focus:ring-danger-500 focus:border-danger-500 border-danger-500 text-danger-500 pr-10 @else focus:ring-primary-500 focus:border-primary-500 @endif rounded-md" 
    />
</div>

If you do not want to use 24 hour time format, remove the time_24hr: true option.
You can then use the component in the same way Upvote described.

Answer 2

I use Pikaday for this task:

npm i pikaday

In app.js:

window.Pikaday = require('pikaday');

Create new blade component

views/components/input/date.blade.php

with

@props([
    'error' => null
])

<div
    x-data="{ value: @entangle($attributes->wire('model')) }"
    x-on:change="value = $event.target.value"
    x-init="
        new Pikaday({ field: $refs.input, 'format': 'DD.MM.YYYY', firstDay: 1 });"
>
    <input 
        {{ $attributes->whereDoesntStartWith('wire:model') }} 
        x-ref="input"
        x-bind:value="value" 
        type="text" 
        class="pl-10 block w-full shadow-sm sm:text-lg bg-gray-50 border-gray-300 @if($error) focus:ring-danger-500 focus:border-danger-500 border-danger-500 text-danger-500 pr-10 @else focus:ring-primary-500 focus:border-primary-500 @endif rounded-md" 
    />
</div>

Use it like this:

<x-input.date wire:model="birthday" :error="$errors->first('birthday')"/>

Answer 3

I also had the same problem. I spent a day trying to solve it, then I found an easy way. Only as follows.

<input type="date" wire:model="date">

It may not be that impressive but it can fulfill the need.. 😜