0

我正在使用Tempusdominus/bootstrap-4包，但我不知道如何为多个日期时间输入定义一个 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 选择从 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 日期时间。

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

4

1 回答 1

0

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

// 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 设置）来使它工作。唯一的问题是 datetimepicker 将使用库中定义的默认设置。要使其适用于新设置，您可以为需要使用 datetimepicker 的每个页面加载一个 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，因此我将其添加到控制器的连接方法中，然后将控制器添加到我想使用 datetimepicker 的每个页面。我使用日期时间输入的默认设置创建了 datetimepicker_controller，使用日期输入的默认设置创建了 datepicker_controller。

于 2020-10-28T21:29:01.507 回答