Using Pikaday with Laravel Livewire

Using Pikaday with Laravel Livewire

In this tutorial, we will demonstrate how to use Pikaday with Laravel Livewire. The tech stack included in this tutorial are TailwindCSS for CSS and Pikaday.

Installation

Install Livewire package via Composer:

composer require livewire/livewire

Create a Laravel layout file(resources/views/layouts/pikaday.blade.php), we are pulling all the Javascript and CSS from their respective CDN network (The purpose is to keep the tutorial setup easy to follow. However in your project, we highly suggest that you set up the Javascript and CSS locally):

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Using Pikaday with Laravel Livewire</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">


    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">


    @livewireStyles
</head>

<body class="bg-gray-200" style="font-family: Nunito;">


<div class="max-w-7xl mx-auto px-4 py-4 sm:py-6 lg:py-8 sm:px-6 lg:px-8 ">
    {{ $slot }}
</div>

@livewireScripts
@stack('scripts')
</body>
</html>

Working on Livewire Component

Create a Livewire component to work with Pikaday. Run the command below from CLI to generate the component files:

php artisan make:livewire Pikaday

You should see two generated files at:

app/Http/Livewire/Pikaday.php
resources/views/livewire/pikaday.blade.php

File app/Http/Livewire/Pikaday.php is the component class file whereas resources/views/livewire/pikaday.blade.php is the view file.

Let's create content for the class file(app/Http/Livewire/Pikaday.php):

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Pikaday extends Component
{
    public $myDate;

    public function render()
    {
        return view('livewire.pikaday')
            ->layout('layouts.pikaday');;
    }
}

The variable $myDate is to store the date picked.

In the function render(), we instruct Livewire to render a view file resources/views/livewire/pikaday.blade.php using the layout file at resources/views/layouts/pikaday.blade.php.

This is the pretty standard way of using Livewire component.

Next, we will move on to work on the Pikaday part of the system, which requires some custom tricks.

Working on Livewire View

Copy and paste the view file(resources/views/livewire/pikaday.blade.php) content below and we will explain the key parts of the view file in the following step:

<div>
    <div class="max-w-3xl mx-auto mb-2">
        <div class="bg-white rounded-lg">
            <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
                <div class="text-center">
                    <p class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
                        Using Pikaday with Laravel Livewire
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-3xl mx-auto mb-2">
        <div class="bg-white rounded-lg p-5">

            <div class="flex flex-col space-y-10">
                <div wire:ignore>
                    <input wire:model="myDate"
                           class="form-control w-full border border-gray-500 focus:outline-none p-2"
                           name="my_date"
                           id="myDate"/>
                </div>

                <div>
                    <span class="text-lg">You picked:</span>
                    <div class="w-full min-h-fit h-48 border border-gray-200 p-2">{{ $myDate }}</div>
                </div>
            </div>


        </div>
    </div>

</div>



@push('scripts')


    <script>
        var picker = new Pikaday(
            {
                field: document.getElementById('myDate'),
                onSelect: function() {
                    var data = this.getDate();
                    @this.set('myDate', data);
                }
            });
    </script>


@endpush

The Pikaday manipulates the DOM as soon as they are initialized and continues to mutate the DOM as you interact with them. This makes it impossible for Livewire to keep track, in this case, we can make use of Livewire's wire:ignore tag. This tells Livewire to ignore this part of DOM. That is what the following part of the code has done:

......
<div wire:ignore>
    <input wire:model="myDate"
           class="form-control w-full border border-gray-500 focus:outline-none p-2"
           name="my_date"
           id="myDate"/>
</div>

......

Now Livewire has ignored the Pikaday part of the code, so it has no idea how to deal with $myDate variable in its component class.

In fact, all we need Livewire to know is the data in the input. In a case like this, we can use the special $this blade directive to set the value fo $myDate:

@push('scripts')


    <script>
        var picker = new Pikaday(
            {
                field: document.getElementById('myDate'),
                onSelect: function() {
                    var data = this.getDate();
                    @this.set('myDate', data);
                }
            });
    </script>


@endpush

That is what we have done in the code above. We listen to the Pikaday data changing event and set the value for Livewire's variable $myDate via the $this blade directive.

Finalising the Demo

The last piece of the demo is to render the Livewire component Pikaday to the browser, this is done simply via the route file routes/web.php:

Route::get('/pikaday', Pikaday::class);

Now start a simple server via Laravel: php artisan serve and visit http://127.0.0.1:8000/pikaday from your browser, and you should see a nice working Pikaday powered input field.

Source Code

If you follow along with the tutorial step by step, you will get all the source code in place. However, if you are feeling lazy or need to download the complete source code from us. You can do so by paying us a small fee. Your support will enable us to produce better and more in-depth tutorials.

Download Source Code

#Using Pikaday with Laravel Livewire

#Installation

#Working on Livewire Component

#Working on Livewire View