Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

389
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda