symfony Admin lte Bundle personalize datetype form

I'm using the kevinPast adminLte bundle on symfony 5. Every datetype got their own format(dd-MM-YYYY) and you can't update it as a normal way by writing 'format' => 'yyyy-MM-dd' inside the form for example. The problem occurs also for other datetype, like birthday.

I also try to use my own datepicker function to override the existing one, but it's a bundle, so it first not work, then it broke also the existing js.

You can see the different try i did:

            ->add('startTime', DateTimeType::class, [
            'required' => true,
            'error_bubbling' => false,
            'date_widget' => 'single_text',
            // @todo Can we make this format configurable?
            'date_format' => 'yyyy-MM-dd',  // must match data-date-format as defined in field.html.twig
            'minutes' => range(0, 55, 5)
        ])

it will show the data like that

it use the block date_widget on twig, the single_text area

{% block date_widget %}
{% if widget == 'single_text' %}
    <div class="input-group">
    <div class="input-group-addon">
    <i class="far fa-calendar-alt"></i>
    </div>

    {% if type is not defined or type != 'date' %}
        {% if attr.class is defined %}
            {% set class = attr.class ~ ' timepicker' %}
        {% else %}
            {% set class = ' timepicker' %}
        {% endif %}
        {% set attr = attr|merge({'class' : class, 'data-datepickerenable':'on'}) %}
    {% endif %}
    {{ block('form_widget_simple') }}
    </div>
{% else %}
    {% set date_pattern = '<div class="row">' ~ date_pattern ~ '</div>'|raw %}
    {{ date_pattern|replace({
    '{{ year }}' : '<div class="col-xs-4">{{ year }}</div>',
    '{{ month }}' : '<div class="col-xs-4">{{ month }}</div>',
    '{{ day }}' : '<div class="col-xs-4">{{ day }}</div>',
    })|raw|replace({
    '{{ year }}':  form_widget(form.year),
    '{{ month }}': form_widget(form.month),
    '{{ day }}':   form_widget(form.day),
    })|raw }}
{% endif %}

{% endblock %}

I also try to override it by using the following code: Js part:

$(document).ready(function() {
$('.datepicker').datepicker({
      format: "DD/MM/YYYY h:mm"
});

});

form part

->add('startTime', DateTimeType::class, [
            'required' => true,
            'error_bubbling' => false,
            'date_widget' => 'single_text',
            //<input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">

            // @todo Can we make this format configurable?
            'date_format' => 'yyyy-MM-dd',  // must match data-date-format as defined in field.html.twig
            'minutes' => range(0, 55, 5),
            'attr' => ['class' => 'datepicker'],
        ])

This one overide the actual datepicker, but first doesn't fix the problem(you still have the standard format DD-MM-YYY) then it also broke the js used by the bundle(some navigation button doesn't work etc)

If I found a fix, i will also write the answer here.

So after few work on it and if someone got the same problem, I found one solution, maybe not the best but it's work. I checked the demo used with adminLte bundle on symfony (Kimai2)

So to be able to edit your calendar and format your date, you need to follow these step: 1 : create a dateTimePickerType and use it instead of default DatetimeType

<?php

namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class DateTimePickerType extends AbstractType
{
    public function buildView(FormView $view, FormInterface $form, array $options)
    {
        $view->vars['attr'] = array_merge($view->vars['attr'], [
            'data-datetimepicker' => 'on',
            'autocomplete' => 'off',
            'placeholder' => strtoupper($options['format']),
            'data-format' => $options['format_picker'],
            'data-time-picker-increment' => $options['time_increment'],
        ]);
    }

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults([
        'label' => '',
        'widget' => 'single_text',
        'html5' => false,
        'format' => 'YYYY-MM-DD',
        'format_picker' => 'YYYY-MM-DD',
        'with_seconds' => false,
        'time_increment' => 1,
    ]);
}

/**
 * {@inheritdoc}
 */
public function getParent()
{
    return DateTimeType::class;
}


}

and on the formType

->add('startTime', DateTimePickerType::class, [
        'required' => true,
        'error_bubbling' => false,
        'label' => 'startTime',
        'format' => "yyyy-MM-dd'T'HH:mm:ss",
        'attr' => ['class' => 'js-datepicker-hours'],
    ])

Then the javascript part, you need to install daterangerpicker from www.daterangepicker.com

and use these following function:

      const $ = require('jquery');
global.$ = global.jQuery = $;

const Moment = require('moment');
global.moment = Moment;
require('moment/locale/en-gb');
require('daterangepicker');

$(document).ready(function() {
    $('.js-datepicker').daterangepicker({
        language: "en",
        singleDatePicker: true,
        showDropdowns: true,
        minYear: 1901,
        //maxYear: parseInt(moment().format('YYYY'),10)
    });

$('.js-datepicker-hours').daterangepicker({
    language: "en",
    timePicker: true,
    singleDatePicker: true,
    showDropdowns: true,
    locale: {
        format: 'yyyy-MM-DD HH:mm:ss'
    }
    //maxYear: parseInt(moment().format('YYYY'),10)
});