javascript - 无法加载 bool 玛日历扩展

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