How to use Pikaday datepicker library in Laravel 8 and Livewire
Published: 2021-09-12 16:16:40

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.

```php
npm install pikaday
```
you can use it directly without installing it using npm with the following script 

```js
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
```
Register the package in __app.js__ file
```php
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:

```css
@import './node_modules/pikaday/css/pikaday.css';
```
Or link to the CDN:
```css
<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
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
```php
<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

```php
   <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
```php
 <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. :smile: :unicorn: :lion: