jquery - Bootstrap 4 TempusDominus 不会应用格式

Question

我想了解为什么此代码无法显示正确的格式。当我单击日期时，它会恢复为默认值。

$('.datetimepicker-input').each(function() {
    $(this).datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        date: moment()
    });
});

如果我使用该字段的 id 它可以工作，但我并不总是具有相同的 id，并且我可以在同一页面上有不同的日期选择器。

    $('#datetimepicker1').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
        date: moment()
    });

是否可以让它与循环一起工作？

Answer 1

我不太清楚为什么，但该字段似乎使用此 HTML 自行初始化（它使用 twig 模板）：

<div class="input-group date" id="{{ form.vars.attr.datatarget }}" data-target-input="nearest">
    <input type="text" class="form-control {{ form.vars.attr.class }}" data-target="#{{ form.vars.attr.datatarget }}" data-toggle="datetimepicker"
           value="{{ form.vars.value }}" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}"/>
    <div class="input-group-append" data-target="#{{ form.vars.attr.datatarget }}" data-toggle="datetimepicker">
        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
</div>

因此，它没有使用我的初始化参数，而是使用默认值。因此，在 js 中初始化任何内容之前，我根据需要修改了参数：

import moment from 'moment';
import 'tempusdominus-bootstrap-4';
$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
    format: 'DD/MM/YYYY HH:mm',
    date: moment() });