Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

394
Views
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!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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...

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!