在前端开发中，时间选择器是一个常见的需求。而 bootstrap-duration-picker 是一个方便易用的时间选择器工具，可以帮助开发者快速添加时间选择器功能。本文将对如何使用 npm 包 bootstrap-duration-picker 进行详细介绍。
安装
要使用 bootstrap-duration-picker，首先需要将其安装到项目依赖中。在命令行中运行以下命令：
npm install bootstrap-duration-picker
引入
安装完成后，在需要使用 bootstrap-duration-picker 的页面中引入所需的 CSS 和 JavaScript：
<!-- 引入 bootstrap 和 bootstrap-duration-picker 的 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-duration-picker/dist/bootstrap-duration-picker.min.css"> <!-- 引入 bootstrap-duration-picker 的 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-duration-picker/dist/bootstrap-duration-picker.min.js"></script>
注意：在引入 bootstrap-duration-picker 的 JavaScript 文件时，需要确保在 bootstrap 的 JavaScript 文件之后引入。
使用
引入文件的工作完成后，现在可以在页面中使用 bootstrap-duration-picker 了。通过添加如下 HTML 代码：
<div class="input-group input-group-sm duration"> <input type="text" class="form-control" placeholder="选择时间"> <span class="input-group-text"><i class="bi bi-clock"></i></span> </div>
并在 JavaScript 文件中添加如下代码：
-- -------------------- ---- -------
----------------------------------------------------------------- -
--- ----------------------------------------------- -
------------ -----
--------- ------
------------- -----
----------------- ------
---------------- ----
---
---即可在网页中添加一个时间选择器。
配置选项
在上面的 JavaScript 代码中，我们提供了一个配置选项对象，它可以帮助我们对 bootstrap-duration-picker 进行各种定制，让其更符合自己的需求。
bootstrap-duration-picker 支持以下配置选项：
showSeconds: 是否显示秒数，默认为true。showDays: 是否显示天数，默认为false。showZeroDays: 在不满一天时是否显示“0 天”，默认为false。showMilliseconds: 是否显示毫秒数，默认为false。showClearButton: 是否显示“清空”按钮，默认为false。
示例代码
下面是一个完整的使用示例，可以帮助开发者更好地理解 bootstrap-duration-picker 的使用方法以及配置。
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------- ------------
---- -- --------- - ------------------------- - --- -- ---
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- -----------------
---- ------------------ -------------- ----------
------ ----------- -------------------- -------------------
----- --------------------------- --------- ---------------------
------
------
------
------
---- -- --------- - ------------------------- - ---------- -- ---
------- -------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------------------------
--------
----------------------------------------------------------------- -
--- ----------------------------------------------- -
------------ -----
--------- ------
------------- -----
----------------- ------
---------------- ----
---
---
---------
-------
-------总结
bootstrap-duration-picker 是一个非常方便的时间选择器工具，可以极大地提高开发效率。在使用 bootstrap-duration-picker 时，需要注意其依赖的 bootstrap 版本，同时熟悉其配置选项，以便更好地满足自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bc581e8991b448d9627