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

不确定是否可以解决问题，但是将输入类型从“文本”更改为“日期”

<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 Calendar在我的项目中可以正常工作。

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

});

无法加载bulma日历扩展

3 个答案: