Tempusdominus bootstrap4对多个输入使用一个实例

Question

我使用的是Tempusdominus/bootstrap-4包，但我不知道如何为多个datetime输入定义一个Tempusdominus实例。我需要这个设置，因为我有一个具有30多个datetime输入的表单，而实例化30多个Tempusdominus似乎没有效率。

下面是一个示例，其中包含2个Tempusdominus实例和2个datetimes输入。

// 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上的data属性，但是Tempusdominus实例将不知道触发了哪个datetime输入。就像这样。

// 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>

在上面的例子中，无论try使用哪个日期时间输入，只有最后一个会显示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>

在视图中，我们仍然在每个datetime输入上使用ID。现在，如果您使用如上所述的data属性定义datetime输入，那么Tempusdominus将实例化一个新的datetimepicker。在此之前，您不需要添加任何内容(如JS设置)来使其工作。唯一的问题是datetime选择器将使用库中定义的默认设置。要使其与新的设置一起工作，您可以为需要使用日期时间选择器的每个页面加载一个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",
    }
  }
);

这应该在要使用它的页面的load事件上调用。我使用的是StimulusJS，因此我将此代码添加到控制器的connect方法中，然后将控制器添加到要使用datetimepicker的每个页面中。我使用datetime输入的默认设置创建了一个datetimepicker_controller，并使用date输入的默认设置创建了datepicker_controller。