How to use pikaday in Laravel / livewire / alpinejs app?

Question

How to use pikaday in Laravel 8 / livewire 2.5 / alpinejs 3 / tailwindcss: 2.2 app ? I installed with npm pikaday and moment-timezone and added lines in

resources/js/app.js file :

require('./bootstrap');

import Alpine from 'alpinejs';
window.Alpine = Alpine;

Alpine.start();


require('@fortawesome/fontawesome-free/js/all.min.js');
import * as moment from 'moment-timezone';

import * as pikaday from  'pikaday/css/pikaday.css';
window.Pikaday = Pikaday;

But I got errors :

test:180 Uncaught TypeError: window.Pikaday is not a constructor
    at test:180
(anonymous) @ test:180
app.js:5260 Uncaught ReferenceError: Pikaday is not defined

when I to use them in the template :

var picker = new window.Pikaday({
    field: document.getElementById('datepicker'),
    format: 'D MMM YYYY',
    onSelect: function() {
        console.log('onSelect this::')
        console.log(this.getMoment().format('Do MMMM YYYY'));

    }
});

Which is correct way ?

Modified Block #1 :

I managed to import Pikaday with lines in resources/js/bootstrap.js:

var Pikaday = require('pikaday');
console.log('app.jsPikaday::')
console.log(Pikaday)

window.Pikaday = Pikaday;

In the doscs I read :

You will also need to include Pikaday CSS file. This step depends on how Pikaday was installed. Either import from NPM: @import './node_modules/pikaday/css/pikaday.css';

But adding line in resources/js/bootstrap.js:

import './node_modules/pikaday/css/pikaday.css';

I got errro in console :

ERROR in ./resources/js/bootstrap.js 19:0-48
Module not found: Error: Can't resolve './node_modules/pikaday/css/pikaday.css' in 'ProjectPath/resources/js'

webpack compiled with 1 error

I really found a file /ProjectPath/node_modules/pikaday/css/pikaday.css. Do I use invalid syntax ...

How to fix it?

Thanks!

Answer 1

I added line

<link href="{{ asset('css/pikaday.css') }}" rel="stylesheet"> :

into resources/views/layouts/app.blade.php with manullyy creating new file /public/css/pikaday.css with content of /node_modules/pikaday/css/pikaday.css file. It works, but it does not seems good decision for me...