无法加载bulma日历扩展

Question

在一个新的laravel项目中，我使用npm install bulma-calendar --save-dev安装了bulma-calendar。在我的app.scss文件中，我导入bulma和bulma-calendar，如下所示：

@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元素：

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

但是当我单击该输入字段时，我看不到任何日历，就像我在demo页面上看到的一样。我遗漏了什么？

另外，在控制台中，我看到以下错误：

TypeError: __WEBPACK_IMPORTED_MODULE_0_bulma_calendar_dist_bulma_calendar_min___default.a is not a constructor

Answer 1

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

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

来源：https://demo.creativebulma.net/components/calendar/v6/#html-structure

Answer 2

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

/resources/sass/app.scss

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

/resources/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());
    });
}
});

在我看来，blade.php

`<input type="date">`

这是我的工作，希望能对你有所帮助

Answer 3

对于像你这样的例子，我试着这样做：

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());
        });
    }

});