Search code examples
jquerytempus-dominus-datetimepicker

Bootstrap 4 TempusDominus won't apply the format

I would like to understand why this code cannot display the right format. It falls back to default when I click on a date.

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

unwanted output

If I use id of the field it works but I don't have always the same id and I can have different datepicker on the same page. 

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

wanted result

Is it possible to have it working with a loop ?

Solution

  • I am not super aware of why but the field seems to initialize by itself using this HTML (it uses twig templating) : 

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

    So instead of using my initialization parameters it used the default. So, I modified the parameter as I wanted before anything gets initialized in 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() });