3

我正在努力使 datetimepicker 在 Bootstrap4 上工作npm，编译代码时没有任何错误，并且检查器中没有任何错误，并且插件正在工作，但似乎它没有加载出于某种原因的 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/

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

4

3 回答 3

1

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

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

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

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

于 2020-10-27T02:55:27.410 回答
1

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

于 2020-10-20T20:27:00.880 回答
1

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

这是代码：

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

为了选择 hh:mm 格式：

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

结果如下：

在此处输入图像描述

于 2020-10-26T16:13:02.057 回答