时间戳

首页 > 解决方案 > 如何在 Laravel / livewire / alpinejs 应用程序中使用 pikaday？

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

问题描述

如何在 Laravel 8 / livewire 2.5 / alpinejs 3 / tailwindcss: 2.2 app 中使用 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;

在我阅读的文档中：

您还需要包含 Pikaday CSS 文件。此步骤取决于 Pikaday 的安装方式。从 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。我是否使用了无效的语法...

如何解决？

谢谢！

标签： javascriptlaravelpikaday

解决方案

我添加了行

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

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

推荐阅读