Wrapping flatpickr with Alpine.js and Laravel Livewire (using @entangle)

hello everyone in this video we are going to create a reusable daypicker component we will do so by using my favorite daypicker flat picker and wrapping it with alpine and livewire it is meant as an example of how you can wrap javascript libraries in general before we get started with building our component we will have a look at what the end result will be i think that will make it easier to follow along with the rest of the video this is the form we are going to be working with in it we are going to build our day picker component with the following functionality it should attach flatbeaker to both our inputs the inputs should be clearable and we will want to be able to set a date for example today on both inputs at the same time to get us up and running quickly i have already created the required files and removed all functionality from our inputs let me show you what we'll be working with this is our livewire component that uses the date pickers on the form it has an event where it starts at and an ends at attribute it also has a method called start today that sets both attributes to today let's have a look at the view this is the view belonging to the livewear component it renders the daypicker component that we'll be building for both attributes and wire models to them as if they were regular inputs and that is exactly what we want to hide all the complexity of a day picker in our reusable daypicker component now let's finally look at the file we will actually be working with the daypicker component i've removed all the functionality from it so that we can start from scratch at this point these inputs are just regular inputs we'll want to turn them into flat picker instances to do so we'll head over to the flat picker documentation we'll copy the cdn for the styling in the javascript and we'll add them to our blade component to initialize flat picker we'll need an id on our input and then we'll need to call flat picker pass the id and we'll pass an empty object as configuration let's see if that works sure enough it works now we have flat picker working in vanilla javascript there's actually still a problem the second input isn't working because we hard coded the id in our blade component this problem will be resolved once we wrap our flat picker instance with alpine let's start working on that we'll copy the basic template for an alpine component from the documentation and we'll use that in our blade components to help us get started we'll remove these methods we'll call this date picker and we'll add an initialize method and in there we'll initialize our flat picker instance we'll now call our alpine component from here take picker and we'll resolve the problem with hard coded id by creating a reference and we'll refer to that reference here that should do it let's see if it works and there we go the first input works and the second input works we now have one-way data binding meaning that the flatbreaker instance can update our input but we have no way of updating the flat picker instance from alpine to get this reset button to work we'll need 2-way data binding to get that working we will give our alpine component access to the value of the input to do so we will create a variable called select date and we will bind our input to that variable using x model let's create this variable and let's bind to it and now we should be able to use a click event to reset the value of the component i'll add a reset method here and we'll reset the value to no that work so we can set the date and we can reset the dates and it's working both components independent of each other so that's great we have now reached two-way data binding between our alpine component and the flipbacker instance the next thing we will want to do is bind the alpine variable selected date to our live fire component this is actually very easy because live fire has an amazing directive called entangle that was created for just this purpose the entangle method gives us two-way data binding between an alpine variable and a livewire variable the first thing we will try is binding to the start's add field on the event property of our live r component so we'll add entangle in here and we'll bind to event starts at that will now get passed in to the constructor and we'll set that as the value of the selected date let's see how it works as you can see we have a problem it works great with one input but not with multiple both inputs are now bound to the same field we can do better than that by using live r's wire method on the attribute back to dynamically fetch the reference we need so we'll change this hardcoded data and now they both work independently of each other and if we look in the debug bar we can see that both values have been set on the livewire component now that we have two-way data binding between alpine and live wire the start today button should also work let's see what it does and if it works in our livewire blade file the button has a wire click event listener which calls a start today function this function is located in our live r component and sets both the start at and the end set property of the event to today and because we have two-way data binding that should also set the alpine variable selected date to the same date let's see if it works and it does as a reminder of all the things we've built let's finish up by taking a step back and looking at how the data flows through our components it can go from live wire all the way to our flapper instance it does so because we entangled our life our components to our alpine components then the alpine component is bound to the input and flat picker watches the input for updates if on the other hand we change the value of the flat picker then the input will get updated which will in turn update selected date which will update the livewire component i hope you learned something today thank you for watching

Channel: TALL Programmer

Views: 469

Keywords: Laravel, Livewire, Alpine, Tailwind, Tall stack, Php, Programming, Entangle, Datepicker

Id: cLx40YxjXiw

Length: 9min 35sec (575 seconds)

Published: Fri Nov 26 2021