如何在 Laravel / livewire / alpinejs 应用程序中使用 pikaday？

Question

如何在 Laravel 8/livewire 2.5/alpinejs 3/tailwindcss: 2.2 应用程序中使用 pikaday？我安装了 npm pikaday 和 moment-timezone 并在

中添加了行

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;

但我遇到了错误：

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

当我在模板中使用它们时:

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'));

    }
});

哪种方法正确？

修改块#1：

我成功地使用 resources/js/bootstrap.js 中的行导入了 Pikaday：

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

window.Pikaday = Pikaday;

在我阅读的文档中：

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';

但在 resources/js/bootstrap.js 中添加行：

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

我在控制台中遇到错误：

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 编译有 1 个错误

我真的找到了一个文件/ProjectPath/node_modules/pikaday/css/pikaday.css。我是否使用了无效语法...

如何解决？

谢谢！

Answer 1

我添加了行

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

进入resources/views/layouts/app.blade.php 手动创建新文件 /public/css/pikaday.css /node_modules/pikaday/css/pikaday.css 文件的内容。它有效，但对我来说似乎不是一个好决定...

如何在 Laravel / livewire / alpinejs 应用程序中使用 pikaday？

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

javascript

laravel

pikaday