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

Posted 2023-05-07

【中文标题】努力在 NPM 上的 Bootstrap 4 上使用 datetimepicker

【英文标题】：struggling to use datetimepicker on Bootstrap 4 on NPM

【发布时间】：2021-02-01 02:11:49

【问题描述】：

我正在努力使 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/

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

【问题讨论】：

你有错误的代码框吗？

是的，我确实有一个沙箱，但它没有任何错误。我认为这个模块不适合 bootstrap 4，它使用的是 bootstrap 4 没有的 CSS 类。

【参考方案1】：

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

【讨论】：

感谢您的回答，不幸的是/没有帮助，CSS文件导入正确，我认为这个模块不适合Bootstrap4，我的bootstrap版本没有datetimepicker 日历的 CSS 标记。还有其他想法吗？

【参考方案2】：

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

代码如下：

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

为了选择 hh:mm 格式：

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

结果如下：

【参考方案3】：

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

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

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

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