eonasdan-bootstrap-datetimepicker-bootstrap4beta 是一个基于 Bootstrap 4 的日期时间选择器插件，在实现日期时间选择器方面非常实用。在开发前端应用程序时，日期时间选取器是一个必需的特性，因此学习如何使用 eonasdan-bootstrap-datetimepicker-bootstrap4beta 包对于开发人员是非常有用的。
安装
要使用 eonasdan-bootstrap-datetimepicker-bootstrap4beta 包，首先必须在项目中使用 npm 包管理器安装。在终端中，使用以下命令：
npm install eonasdan-bootstrap-datetimepicker-bootstrap4beta --save
该命令将在项目的 package.json 文件中添加 eonasdan-bootstrap-datetimepicker-bootstrap4beta 依赖项，并在 node_modules 文件夹中安装包和其依赖项。
基本使用
要使用 eonasdan-bootstrap-datetimepicker-bootstrap4beta 包，需要在 HTML 文件中添加以下代码：
<div class="form-group">
<div class="input-group date" id="datetimepicker">
<input type="text" class="form-control" />
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>这将创建一个可以选择日期和时间的文本框。要初始化日期时间选择器，必须包含以下 JavaScript 代码：
$(document).ready(function() {
$('#datetimepicker').datetimepicker();
});这将在文本框旁边添加一个日历图标，用户单击该图标时将打开日期时间选择器。用户可以单击日期时间选择器中的日期和时间来选择日期和时间。
更多选项
eonasdan-bootstrap-datetimepicker-bootstrap4beta 包有很多选项，可以用来自定义日期时间选择器的行为和外观。以下是一些可能有用的选项：
format
$('#datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});该选项将更改日期时间选择器中显示的日期和时间格式。
useCurrent
$('#datetimepicker').datetimepicker({
useCurrent: false,
});该选项将禁用日期时间选择器中的默认日期设置行为。默认情况下，选择器将使用当前日期作为默认日期。
minDate 和 maxDate
$('#datetimepicker').datetimepicker({
minDate: '2022-01-01',
maxDate: '2022-12-31',
});这些选项将限制用户可以选择的日期的范围。
disabledDates 和 enabledDates
$('#datetimepicker').datetimepicker({
disabledDates: ['2022-01-01', '2022-02-14'],
enabledDates: ['2022-03-17', '2022-04-20'],
});这些选项将禁用或启用用户可以选择的日期。禁用日期将显示灰色，不能选择。
locale
$('#datetimepicker').datetimepicker({
locale: 'zh-cn',
});此选项将更改日期时间选择器的本地化设置。可以选择多种语言设置。
示例代码
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
------------------------------------------------------- ------------
----- ---------------- --------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------
----- ---------------- ---------------------------------------------
-------
------
---- ------------------
---------------------------------------------------- ---------
---- -------------------
---- ------------------ ----- --------------------
------ ----------- -------------------- --
----- --------------------------
-- --------- -----------------
-------
------
------
------
------- ------------------------------------------------------------------
------- ----------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- ---------------------------------------------------
--------
---------------------------- -
-------------------------------------
------- ----------- ----------
----------- ------
-------- -------------
-------- -------------
-------------- -------------- --------------
------------- -------------- --------------
------- --------
---
---
---------
-------
-------结论
eonasdan-bootstrap-datetimepicker-bootstrap4beta 包是一个非常强大的日期时间选择器插件，它为前端开发人员提供了可靠的工具来帮助他们构建具有日期和时间选择器的 Web 应用程序。在学习了本文章中的内容后，读者应该已经掌握了如何安装、使用、自定义和更多选项的基本知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdc6