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 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')"/>