struggling to use datetimepicker on Bootstrap 4 on NPM

user_7325962 0
Viewed 1980

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.

bootstrap-datetimepicker bootstrap-datepicker bootstrap-4 npm datepicker
3 Answers

Looks like you might be using a bad path (~<some_path> vs ~/<some_path>). Try @import "~/bootstrap4-datetimepicker/build/css/bootstrap4-datetimepicker.css"

user_55171000

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:

enter image description here

user_73259620

I'd be curious to know where this is happening:

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

I feel like last time I did something like this I still needed to include the css in the index.html. I'd give that a shot if you encounter this again or don't want to include unnecessary libraries.

Also that path to the css file doesn't look quite right.

user_37389360
Related