How to use Pikaday datepicker library in Laravel 8 and Livewire

Holla!
In this blog post we are going to see how to use Pikaday library in laravel and livewire in two different ways.
You need to create laravel and livewire project. (You already know how to install it, so I am not going to give installation details in this post)

1 - Using laravel component (with this we can reuse this datepicker in overall application).
2 - Simple way to use it directly in livewire component.

Firstly we will install pikaday library using npm and register this package in app.js file and after that we will see both examples.

npm install pikaday

you can use it directly without installing it using npm with the following script

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Register the package in app.js file

window.Pikaday = require("pikaday");

Now we need to include Pikaday style into our application. This step depends on how Pikaday was installed. Either import from npm:

@import './node_modules/pikaday/css/pikaday.css';

Or link to the CDN:

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

Let start with the first example.

Steps to follow -

• Create laravel component
• Define pikaday in component
• Use it in blade file wherever you need it

Create a component using this command

php artisan make:component DatePicker

make:component command creates a view template file as well as a Component class file. View layout file will be find inside /resources/views/components/date-picker.blade.php. Along with this view file we also have a component class file. Class file we can find inside /app/View/Components/DatePicker.php

open date-picker.blade.php file and add below code

<div
    x-data=""
    x-on:change="value = $event.target.value"
    x-init="
        new Pikaday({ field: $refs.input, 'format': 'MM/DD/YYYY', firstDay: 1, minDate: new Date(), });"
        class="sm:w-27rem sm:w-full">
    <div class="relative mt-2">
        <input
            x-ref="input"
            x-bind:value="value"
            type="text"
            class="w-full pl-4 pr-10 py-2 leading-none rounded-lg shadow-sm focus:outline-none border-gray-300 text-gray-600 font-medium focus:ring focus:ring-blue-600 focus:ring-opacity-50" placeholder="Select date"
        />
     </div>
</div>

Now we can use this component anywhere with the help of following code

   <x-date-picker
      wire:model="date"
      id="datepicker"
      autocomplete="off"
   />

Let's see second type: simple way to use pikaday datepicker

Open a blade file where you want to use datepicker and add below code

 <input id="datepicker"
     x-data
     x-ref="input"
     x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY', minDate: new Date(),})"
     type="text"
     class="shadow-sm mt-1 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded-md w-27rem"
 />

That's it. We have seen two examples to use pikaday datepicker library in laravel 8 and livewire.
For more details about Pikaday library you can visit its site https://www.npmjs.com/package/pikaday

Thank you for reading. 😄 🦄 🦁