bulma-calendar: Unable to use the calendar as input

In a new laravel project, I installed bulma-calendar using npm install bulma-calendar --save-dev. In my app.scss file, I am importing both bulma and bulma-calendar like this:

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

and in the bootstrap.js file at the top of the file I imported the minified js file:

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

and at the bottom of it I added this:

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

And in my welcome.blade.php I added an input element:

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

But I don’t see any calendar when I click on that input field, just as I see on your demo page. What am I missing?