努力在NPM上的Bootstrap 4上使用datetimepicker

编程问答 2022-06-07

问题描述

我正在努力使用npm在Bootstrap4上使datetimepicker正常工作，编译代码时我没有任何错误，并且检查器中没有任何错误，并且插件可以正常工作，但是它可以正常工作似乎由于某种原因无法加载CSS。

这是我已经尝试过的：

 npm i bootstrap4-datetimepicker

然后我使用

在我的JS文件中导入了datetimepicker。 

import 'bootstrap4-datetimepicker';

并且我已经用以下方式将datetimepicker CSS导入到我的平均SCSS文件中：

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

我根本没有任何JS错误，因此所有文件均已正确导入。

这是我的HTML文件：

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

这是我的JS文件：

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

当我单击输入字段但没有CSS时出现日历。这是我要实现的http://eonasdan.github.io/bootstrap-datetimepicker/

结果

如果该模块可用于选择日期和时间，我愿意使用其他模块。

解决方法

好像您使用的路径不正确（~<some_path>与~/<some_path>）。尝试@import "~/bootstrap4-datetimepicker/build/css/bootstrap4-datetimepicker.css"

,

我设法通过以下方式解决了这个问题：该模块使在日历中显示自定义图标成为可能，我使用fontawsome图标css类来显示向上和向下箭头，

代码如下：

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

为了选择hh：mm格式：

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

这是结果：

enter image description here

,

我很想知道这是怎么发生的：

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

我觉得上一次我做这样的事情时，我仍然需要在index.html中包含css。如果您再次遇到这种情况或不想包含不必要的库，我会给您一个镜头。

css文件的路径看起来也不正确。

bootstrap-4bootstrap-datepickerbootstrap-datetimepickerdatepickerdatepickernpmnpm