Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

clinvest's avatar

Pikaday / Moment / Alpinejs, moment script import

Hi all!

I'm stuck with the correct way to import Moment on a pikaday field to format my field. I'm following the tutorial from the livewire screencast serie, but I import the scripts using node.

For now: pikaday is working, but I don't know how to import / init moment to format my date.

Here is my code:

@props(['disabled' => false])
<div x-data x-init="new Pikaday({ field: $refs.input, format:'M/D/YY' })">
    <input x-ref="input" {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'block w-full']) !!}>
</div>

import Pikaday from 'pikaday';
window.Pikaday = Pikaday;

(css is imported directely in the styles)

How to import moment? tried this way, it's not working. My formatting value is in the blade view format:'M/D/YY'.

import moment from 'moment';
window.moment = moment;

Thank you in advance,

0 likes
7 replies
clinvest's avatar

Or nobody using pikaday now? Maybe that's getting old? And other script suggestion?

clinvest's avatar

Hello all, I'm sorry, I'm restarting this question because I'm really stuck.

Here is my full code:

<div x-data x-init="
    moment.locale(); console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
    new Pikaday({ 
        field: $refs.input,
        format: 'M/D/YY',
        onSelect: function() {
            console.log(this.getMoment());
        }
})">
    <input type="text" x-ref="input" {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'block w-full']) !!}>
</div>

This is working properly: moment.locale(); console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));

But this console.log(this.getMoment()); returns null.

Means moment is imported correctly but "not linked" to pikaday.

Here is my import also:

import Pikaday from 'pikaday'
window.Pikaday = Pikaday

import moment from 'moment'
window.moment = moment

Any help would be amazing :)

webrobert's avatar
webrobert
3 years ago
Best Answer
Level 51

@clinvest,

I think the order ended up mattering for me.

import Alpine from 'alpinejs';
import moment from "moment";

window.moment = moment;
window.Alpine = Alpine;

Alpine.start();


// and in then for pikaday...

 toString(date) { return window.moment(date).format('ddd, MMM D, YYYY') } }
clinvest's avatar

Thank you webrobert, I will set it up at the best answer because I think you are correct however I changed the library to another one because I kept stuck.

Thank you for your help :)

1 like

Please or to participate in this conversation.