Sentgine LogoSentgine

The Easiest Way to Use Pikaday with Livewire and Alpine.js in Laravel

Easily integrate Pikaday with Livewire and Alpine.js for seamless date selection in Laravel.

Categories: Tech, Web Development
Tags:
alpinejs laravel livewire php
Adrian Navaja
Adrian Navaja
Feb 21 2024, 9:33AM
|
3 min read

I recently ran into a roadblock while working on my latest solo project. Trying to add a datepicker, I found myself in familiar territory: scouring the internet for solutions. Like many of us, I’m not great at remembering every detail, so I rely on Google to guide me through implementation challenges. However, despite my efforts, I couldn’t quite crack the code.

That’s when I turned to Microsoft’s Copilot, a tool similar to ChatGPT but with access to the vast resources of the internet. While Copilot didn’t hand me the entire solution on a silver platter, it did offer a crucial piece of the puzzle. Armed with this newfound insight and combining it with the information I’d gathered through my own research, I finally discovered the simplest way to integrate the Pikaday datepicker using Livewire and Alpine.js.

In this blog post, I’ll walk you through the steps I took, breaking down the process into easy-to-follow instructions. Whether you’re a seasoned developer or just starting out, my aim is to make this guide accessible to all skill levels.

Let’s dive in and unlock the power of Pikaday with Livewire and Alpine.js!

(1) First, let’s consider this code below, as this all you need on the frontend.

(2) Secondly, let’s break it down. We’ll begin with x-init.

The x-init feature in Alpine.js lets you set up stuff when an element first loads. In my code above, x-init=”new Pikaday({ field: $el })” is used to kickstart a Pikaday datepicker on an input field as soon as my component loads. And that’s all it does.

Here’s a breakdown:

  • new Pikaday({ field: $el }): This creates a new instance of Pikaday with the current element ($el) as the field. Pikaday is a datepicker library, so this will attach a datepicker to your input field.
  • x-init: This is an Alpine.js directive that runs when the element is being initialized. So, the Pikaday instance is created when the input field is initialized.

(3) Third is the x-on:change directive.

  • x-on:change: This is an Alpine.js directive that listens for a change event on the input field. In other words, it waits for the user to select a date from the datepicker.
  • $wire.startDate: This is simply the Livewire property that I’ve created in my Livewire component class.

(4) The formatDateToYYYYMMDD(new Date($el.value)) is a JavaScript function I made to format the chosen date into the ‘YYYY-MM-DD’ format. Here, $el.value represents the input field’s value, which is the selected date. I designed this function to convert the date string produced by Pikaday into the desired format.

This function isn’t strictly necessary for this task, but it could be useful for your date picker.

Final Thoughts

Adding date pickers like Pikaday in Livewire with Alpine.js can really make your date picker form fields look a lot nicer.

Have you used Pikaday in your Laravel Livewire projects? Tell me how it went in the comments! I’d love to hear what you think and any questions you have. Your thoughts help us all learn and grow as developers.