Tempusdominus bootstrap4 使用一个实例进行多个输入

Question

我正在使用Tempusdominus/bootstrap-4 package 并且我不知道如何为多个日期时间输入定义一个 Tempusdominus 实例。 我需要此设置，因为我有一个包含 30 多个日期时间输入的表单，并且实例化 30 个以上的 Tempusdominus 似乎效率不高。

这是一个包含 2 个 Tempusdominus 实例和 2 个日期时间输入的示例。

// datetime.js (2 Tempusdominus instances)
$(function () {
  $('#datetimepicker-1').datetimepicker({viewMode: 'years', format: 'YYYY'});
  $('#datetimepicker-2').datetimepicker({viewMode: 'days', format: 'DD.MM.YYYY'});
});

// view.html
<!-- datetime 1 -->
<div class="form-group">
  <div class="input-group date" id="datetimepicker-1" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-1"/>
    <div class="input-group-append" data-target="#datetimepicker-1" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

<!-- datetime 2 -->
<div class="form-group">
  <div class="input-group date" id="datetimepicker-2" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-2"/>
    <div class="input-group-append" data-target="#datetimepicker-2" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

可以将 Jquery select 从 ID 更改为 CLASS 和 html 上的数据属性，但 Tempusdominus 实例将不知道触发了哪个日期时间输入。 像这样的东西。

// datetime.js (1 Tempusdominus instance)
$(function () {
  $('.datetimepicker').datetimepicker({viewMode: 'years', format: 'YYYY'});
});

// view.html
<!-- datetime 1 -->
<div class="form-group">
  <div class="input-group date datetimepicker" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target=".datetimepicker"/>
    <div class="input-group-append" data-target=".datetimepicker" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

<!-- datetime 2 -->
<div class="form-group">
  <div class="input-group date datetimepicker" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target=".datetimepicker"/>
    <div class="input-group-append" data-target=".datetimepicker" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

在上面的例子中，无论尝试使用哪个日期时间输入，只有最后一个会显示 Tempusdominus 日期时间。

任何人都知道如何解决这个问题？

Answer 1

对于那些有同样问题的人......这是一个简单的问题解决方案。 观点是：

// view.html
<!-- datetime 1 -->
<div class="form-group">
  <div class="input-group date" id="datetimepicker-1" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-1"/>
    <div class="input-group-append" data-target="#datetimepicker-1" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

<!-- datetime 2 -->
<div class="form-group">
  <div class="input-group date" id="datetimepicker-2" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker-2"/>
    <div class="input-group-append" data-target="#datetimepicker-2" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

在视图中，我们仍然在每个日期时间输入上使用 ID。 现在，如果您使用我上面显示的数据属性定义日期时间输入，Tempusdominus 将实例化一个新的日期时间选择器。 到这里你不需要添加任何东西（如 JS 设置）来让它工作。 唯一的问题是日期时间选择器将使用库中定义的默认设置。 为了使其适用于新设置，您可以为每个需要使用日期时间选择器的页面加载一个 JS 文件。 JS 文件将是这样的：

// datetime.js (call this on the load page event)
$.fn.datetimepicker.Constructor.Default = $.extend(
  {},
  $.fn.datetimepicker.Constructor.Default,
  {
    format: "DD/MM/YYYY HH:mm",
    minDate: "01/01/1900",
    maxDate: "01/01/2100",
    useCurrent: true,
    todayHighlight: true,
    pickerPosition: "bottom-left",
    locale: "pt-br",
    icons: {
      time: "fas fa-clock",
      date: "fas fa -calendar-alt",
      up: "fas fa-arrow-up",
      down: "fas fa-arrow-down",
      previous: "fas fa-chevron-left",
      next: "fas fa-chevron-right",
      today: "fas fa-calendar-check-o",
      clear: "fas fa-trash",
      close: "fas fa-times",
    }
  }
);

这应该在您要使用它的页面的加载事件上调用。 我正在使用 StimulusJS，因此我将其添加到控制器的连接方法中，然后将 controller 添加到我想要使用 datetimepicker 的每个页面。 我使用日期时间输入的默认设置创建了 datetimepicker_controller，使用日期输入的默认设置创建了 datepicker_controller。