struggling to use datetimepicker on Bootstrap 4 on NPM

Question

I am struggling to make datetimepicker work on Bootstrap4 with npm, I don't have any error when I compile the code and I don't have any error in the inspector, and the plugin is working but it seems like it doesn't load the CSS for some reason.

Here is what I have tried already:

 npm i bootstrap4-datetimepicker

Then I have imported datetimepicker in my JS files with

import 'bootstrap4-datetimepicker';

and I have imported the datetimepicker CSS in my mean SCSS file with:

@import "~bootstrap4-datetimepicker/build/css/bootstrap4-datetimepicker.css"

I don't have any JS error at all so all the files are imported properly.

Here is my HTML file:

 <input type="text" class="form-control" id="datepicker-disabled-days">

Here is my JS file:

 import 'bootstrap4-datetimepicker';
 ...
 $('#datepicker-disabled-days').datetimepicker(
     format: 'LT'
 );
 ...

The calendar appears when I click on the input field but it doesn't have CSS. Here is the result that I want to achieve http://eonasdan.github.io/bootstrap-datetimepicker/

I am open to using another module if the module can be used to select dates and times.

Answer 1

I managed to fix this problem in this way: This module gives the possibility to display custom icons in the calendar, I use fontawsome icons css classes to display the arrow up and arrow down,

Here is the code:

      $('#datetimepicker8').datetimepicker({
          icons: {
              up: "fa angle-up",
              down: "fa angle-down"
          }
      });

In order to select the hh:mm format:

 $('#datetimepicker3').datetimepicker({
     format: 'LT'
 });

Here is the result: