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

Question

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

这是我已经尝试过的方法：

 npm i bootstrap4-datetimepicker

然后我在我的 JS 文件中导入了 datetimepicker

import 'bootstrap4-datetimepicker';

并且我在我的平均 SCSS 文件中导入了 datetimepicker CSS：

@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/

如果模块可以用于 select 日期和时间，我愿意使用另一个模块。

Answer 1

看起来您可能使用了错误的路径（~<some_path> 对比 ~/<some_path>）。尝试 @import "~/bootstrap4-datetimepicker/build/css/bootstrap4-datetimepicker.css"

Answer 2

我设法以这种方式解决了这个问题：这个模块提供了在日历中显示自定义图标的可能性，我使用 fontawsome 图标 css 类来显示向上箭头和向下箭头,

代码如下：

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

为了select hh:mm 格式：

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

结果如下：

Answer 3

我很想知道这是在哪里发生的：

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

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

此外 css 文件的路径看起来不太正确。

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

struggling to use datetimepicker on Bootstrap 4 on NPM

npm

bootstrap-4

datepicker

bootstrap-datepicker

bootstrap-datetimepicker