Bootstrap 4 是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网站。其中，日期时间选择器是 Bootstrap 4 提供的一个实用组件，可以帮助用户轻松选择日期和时间。本文将详细介绍如何使用 Bootstrap 4 的日期时间选择器，并实现一个动态的日期时间选择功能。
1. 引入 Bootstrap 4 和日期时间选择器依赖
首先，确保你的项目中已经引入了 Bootstrap 4 的 CSS 和 JS 文件。此外，还需要引入 Bootstrap 4 的日期时间选择器插件。以下是所需的基本代码：
2. 创建日期时间选择器组件
接下来，创建一个日期时间选择器组件。可以使用 Bootstrap 4 的
input-group
和
input-group-prepend
组件来构建一个带有图标和输入框的日期时间选择器。
3. 初始化日期时间选择器插件
使用 JavaScript 初始化日期时间选择器插件。首先，确保已经引入了 jQuery 和 Bootstrap 的 JS 文件。然后，使用以下代码初始化日期时间选择器：
$(document).ready(function(){
$(‘#datetimepicker’).datetimepicker({
format: ‘YYYY-MM-DD HH:mm:ss’,
locale: ‘zh-CN’
});
});
这里，
format
参数用于设置日期时间的显示格式，
locale
参数用于设置地区。
4. 实现动态日期时间选择功能
为了实现动态日期时间选择功能，你可以通过监听输入框的
change
事件来获取用户选择的日期和时间，并执行相应的操作。
$(‘#datetimepicker’).on(‘change’, function(){
var selectedDate = $(this).val();
// 在这里处理用户选择的日期和时间
console.log(‘Selected date and time:’, selectedDate);
});
5. 示例代码
以下是完整的示例代码：
通过以上步骤，你可以轻松地使用 Bootstrap 4 的日期时间选择器实现动态日期时间选择功能。希望本文对你有所帮助！