如何为Bootstrap 5 UI实现Datetime picker？现有Bootstrap3方案无效

方案1：Tempus Dominus（官方适配Bootstrap 5的选择器） #

Tempus Dominus是Bootstrap官方推荐的日期时间选择器，完美兼容Bootstrap 5.x版本。

• 引入依赖：

  <!-- Bootstrap 5 CSS -->
  <link href="bootstrap.min.css" rel="stylesheet">
  <!-- Tempus Dominus CSS -->
  <link href="tempus-dominus.min.css" rel="stylesheet">
  <!-- jQuery（需3.6+版本） -->
  <script src="jquery.min.js"></script>
  <!-- Tempus Dominus JS -->
  <script src="tempus-dominus.min.js"></script>
  

• 初始化代码：

  <div class="input-group date" id="datetimepicker" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker"/>
    <span class="input-group-text" data-target="#datetimepicker" data-toggle="datetimepicker">
      <i class="fa fa-calendar"></i>
    </span>
  </div>
  
  <script>
    $(function () {
      $('#datetimepicker').datetimepicker();
    });
  </script>
  

方案2：Flatpickr（轻量且可自定义适配） #

Flatpickr本身无框架依赖，但可以通过自定义CSS类适配Bootstrap 5的样式风格。

• 引入依赖：

  <!-- Bootstrap 5 CSS -->
  <link href="bootstrap.min.css" rel="stylesheet">
  <!-- Flatpickr CSS -->
  <link href="flatpickr.min.css" rel="stylesheet">
  <!-- Flatpickr JS -->
  <script src="flatpickr.min.js"></script>
  

• 初始化并适配Bootstrap样式：

  <input type="text" class="form-control" id="flatpickr">
  
  <script>
    flatpickr("#flatpickr", {
      enableTime: true,
      dateFormat: "Y-m-d H:i",
      wrap: true,
      appendTo: document.body,
      // 自定义样式类匹配Bootstrap 5
      className: "form-control"
    });
  </script>
  

方案3：jQuery UI Datepicker + Timepicker插件（手动适配） #

如果习惯用jQuery生态，可以组合这两个插件，手动调整样式适配Bootstrap 5。

• 引入依赖：

  <!-- Bootstrap 5 CSS -->
  <link href="bootstrap.min.css" rel="stylesheet">
  <!-- jQuery UI CSS -->
  <link href="jquery-ui.min.css" rel="stylesheet">
  <!-- jQuery -->
  <script src="jquery.min.js"></script>
  <!-- jQuery UI JS -->
  <script src="jquery-ui.min.js"></script>
  <!-- jQuery Timepicker Addon -->
  <script src="jquery-ui-timepicker-addon.min.js"></script>
  

• 初始化并调整样式：

  <input type="text" class="form-control" id="datetimepicker">
  
  <script>
    $('#datetimepicker').datetimepicker({
      dateFormat: 'yy-mm-dd',
      timeFormat: 'HH:mm'
    });
    // 手动添加Bootstrap样式类到插件生成的元素
    $('.ui-datepicker').addClass('dropdown-menu');
    $('.ui-timepicker-div').addClass('dropdown-menu');
  </script>
  

内容的提问来源于stack exchange，提问作者Vinanti Yadav