Tempusdominus bootstrap4 use one instance for multiples inputs

Question

I'm using Tempusdominus/bootstrap-4 package and I don't know how to define one Tempusdominus instance for multiples datetime inputs. I need this setup because I have a form with more than 30 datetime inputs and instantiating 30 more Tempusdominus seems unproductive.

Here is a sample with 2 Tempusdominus instances and 2 datetimes inputs on view.

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

It's possible to change the Jquery select from ID to CLASS and the data-attributes on the html, but the Tempusdominus instance will not know which datetime input was trigger. Something like this.

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

In the case above, no matter which datetime input a try to use, only the last one will display the Tempusdominus datetime.

Anyone knows how to solve this?

Answer 1

For those with the same problem... here is one easy solution for the problem. The view would be:

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

On the view we still use the ID on each datetime input. Now, the Tempusdominus will instantiate a new datetimepicker if you define the datetime input with the data-attributes as I showed above. Until here you don't need to add anything (as JS settings) to make it work. The only problem will be that the datetimepicker will use the default settings defined on the library. To make it work with new settings, you can load a JS file for each page you need to use the datetimepicker. The JS file would be like this:

// 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",
    }
  }
);

This should be call on the load event of the page that you want to use it. I'm using StimulusJS and hence I'm adding this on the controller's connect method and, then, adding the controller to each page that I want to use the datetimepicker. I made a datetimepicker_controller with my default settings for datetime input and datepicker_controller with my default settings for date input.