Tempusdominus引导程序4将一个实例用于多个输入

Question

我使用的是Tempusdominus/bootstrap-4包，我不知道如何为多个日期时间输入定义一个Tempusdomius实例。我需要这个设置，因为我有一个包含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设置(即可使其工作。唯一的问题是日期时间选择器将使用库中定义的默认设置。为了使用新的设置，您可以为需要使用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，因此我在控制器的connect方法上添加了这个，然后，将控制器添加到我想要使用datetimepicker的每个页面。我用我的默认设置为日期时间输入创建了一个datetimepicker_controller，用我的缺省设置为日期输入创建了datepicker_concontroller。