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

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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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…


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x