[Bug]: Alpine Expression Error: pgFlatpickr is not defined

[abhaypithadiya]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

Alpine Expression Error: pgFlatpickr is not defined

 Expression: "pgFlatpickr(JSON.parse('{\u0022type\u0022:\u0022datetime\u0022,\u0022dataField\u0022:\u0022created_at_formatted\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022filterKey\u0022:\u0022enabledFilters.datetime.created_at_formatted\u0022,\u0022label\u0022:\u0022Created At\u0022,\u0022locale\u0022:null,\u0022onlyFuture\u0022:false,\u0022noWeekEnds\u0022:false,\u0022customConfig\u0022:[]}'))"

<div wire:ignore="" x-data="pgFlatpickr(JSON.parse('{\u0022type\u0022:\u0022datetime\u0022,\u0022dataField\u0022:\u0022created_at_formatted\u0022,\u0022tableName\u0022:\u0022default\u0022,\u0022filterKey\u0022:\u0022enabledFilters.datetime.created_at_formatted\u0022,\u0022label\u0022:\u0022Created At\u0022,\u0022locale\u0022:null,\u0022onlyFuture\u0022:false,\u0022noWeekEnds\u0022:false,\u0022customConfig\u0022:[]}'))">
    <div class="" style="">
        <form autocomplete="off">
            <input id="input_created_at" x-ref="rangeInput" autocomplete="off" data-field="created_at" style=" " class="power_grid form-control shadow-none " type="text" readonly="" placeholder="Select a period">
        </form>
    </div>
</div>

PHP Version

8.1

PowerGrid

v4.4.2

Laravel

v10.9.0

Livewire

v2.12.3

Alpine JS

3.12.0

Theme

Bootstrap

Describe the bug.

Created a new Table and came across this error as datetime filter was already configured.

To Reproduce...

First click on "FOO" then....

Extra information

<?php
 //...

[ElGittoJunior]

Hi I solved this by installing flatpickr via npm and importing it in app.js

npm i flatpickr --save

resources/js/app.js import flatpickr from "flatpickr"; import 'flatpickr/dist/flatpickr.min.css'

[kolydart]

Same issue here. @ElGittoJunior's suggestion fixed it. Thanks

[luanfreitasdev]

https://github.com/Power-Components/powergrid-doc/pull/73

[dumisanigegana]

Hi I solved this by installing flatpickr via npm and importing it in app.js

npm i flatpickr --save

resources/js/app.js import flatpickr from "flatpickr"; import 'flatpickr/dist/flatpickr.min.css'

This worked for we as well.

[bleuscyther]

Hey, for livewire 3, Check the documentation here: https://livewire-powergrid.com/table/column-filters.html#filter-datetimepicker

I also had to do this:

import flatpickr from "flatpickr";
window.pgFlatpickr = flatpickr;

[marcwitteveen]

pgFlatpickr 

This worked for me