I have problems getting run flatpickr with Laravel and using it inside Livewire component.
Steps that I've done:
Installing
flatpickr:npm install flatpickrInside
/resources/js/app.jsI've put:import flatpickr from "flatpickr"; window.flatpickr = flatpickr;Inside layout file I've put
scriptsto the CDN:<html> <!-- ... --> </footer> @livewireScripts @powerGridScripts <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> @stack('js') </body> </html>Created in
/public/js/flatpickr.jsfile for handling actions:flatpickr("#test", { mode: "range" });Put inside
notifications-management.blade.phpview the script path:@if($modalNotificationCreateVisible) @livewire('create-notification-form') @endif @push('js') <script src="{{ asset('js/flatpickr.js') }}"> </script> @endpushInside
create-notification-form(it's a modal) I've put<div>which should be working as datepicker:<div> <input id="test" type="text"> </div>
The effect is not present. If I click on this input in the form is still working as the text one. Do someone have an idea how to handle it or maybe I've missed some steps?