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。