Javascript 无法加载bulma日历扩展

在一个新的laravel项目中，我使用

npm安装bulma日历--save dev

安装了bulma日历。在我的app.scss文件中，我正在导入bulma和bulma日历，如下所示：

@import "~bulma";
@import "~bulma-calendar";

在文件顶部的bootstrap.js文件中，我导入了缩小的js文件：

import bulmaCalendar from 'bulma-calendar/dist/bulma-calendar.min.js'

在它的底部我加了一句：

document.addEventListener( 'DOMContentLoaded', function () {
  var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo' ), {
    startDate: new Date(), // Date selected by default
    dateFormat: 'yyyy-mm-dd', // the date format `field` value
    lang: 'en', // internationalization
    overlay: false,
    closeOnOverlayClick: true,
    closeOnSelect: true,
    // callback functions
    onSelect: null,
    onOpen: null,
    onClose: null,
    onRender: null
  } );
  var datePicker = new bulmaCalendar( document.getElementById( 'datepickerDemo2' ), {
    overlay: true
  } );
} );

在welcome.blade.php中，我添加了一个输入元素：

<input id="datepickerDemo" class="input" type="text" value="11-02-2018">

---

不确定这样做是否有效，但将输入类型从“text”更改为“date”

---

资料来源：

您好，我使用的是laravel 6，我也有同样的问题。但我找到了一种解决方法，现在bulma日历在我的项目中完美地工作了

/资源/sass/app.scss

// Import component 
@import "bulma-calendar";

/参考资料/js/app.js： 把这个放在上面

var bulmaCalendar=require('bulma-calendar');

在此之后：

document.addEventListener('DOMContentLoaded', function () {

// Initialize all input of type date
var calendars = bulmaCalendar.attach('[type="date"]', []);

// Loop on each calendar initialized
for(var i = 0; i < calendars.length; i++) {
    // Add listener to date:selected event
    calendars[i].on('select', date => {
        console.log(date);
    });
}

// To access to bulmaCalendar instance of an element
var element = document.querySelector('#my-element');
if (element) {
    // bulmaCalendar instance is available as element.bulmaCalendar
    element.bulmaCalendar.on('select', function(datepicker) {
        console.log(datepicker.data.value());
    });
}
});

document.addEventListener（'DOMContentLoaded'，函数（）{
//初始化日期类型的所有输入
var calendars=bulmaCalendar.attach（'[type=“date”]'，[]）；
//初始化每个日历上的循环
对于（var i=0；i{
控制台日志（日期）；
});
}
//访问元素的bulmaCalendar实例
var element=document.querySelector（“#我的元素”）；
if（元素）{
//bulmaCalendar实例作为element.bulmaCalendar提供
元素bulmaCalendar.on（'select'，函数（日期选择器）{
log（datepicker.data.value（））；
});
}
});

在我看来，blade.php

`<input type="date">`

``

---

这对我来说很有用，我希望它能帮助你

像你这样的例子，我已经尝试过了：

document.addEventListener('DOMContentLoaded', function () {

    bulmaCalendar.attach('#datepickerDemoDefault', {
        displayMode: 'dialog',
        startDate: new Date(),
        minDate: '01/01/2020',
        maxDate: '12/31/2500',
        lang: 'fr'
    });

    const element = document.querySelector('#datepickerDemoDefault');

    if (element) {
        // bulmaCalendar instance is available as element.bulmaCalendar
        element.bulmaCalendar.on('select', function(datepicker) {
            console.log(datepicker.data.value());
        });
    }

});

---

我在让演示日期选择器工作时遇到问题，发现我必须直接加载bulma-calendar.js文件-存在冲突，当与webpack一起使用时，无法找到“bulmaCalendar”类

`<input type="date">`

document.addEventListener('DOMContentLoaded', function () {

    bulmaCalendar.attach('#datepickerDemoDefault', {
        displayMode: 'dialog',
        startDate: new Date(),
        minDate: '01/01/2020',
        maxDate: '12/31/2500',
        lang: 'fr'
    });

    const element = document.querySelector('#datepickerDemoDefault');

    if (element) {
        // bulmaCalendar instance is available as element.bulmaCalendar
        element.bulmaCalendar.on('select', function(datepicker) {
            console.log(datepicker.data.value());
        });
    }

});