Sonata Admin: el calendario no se cierra

Escenario

Incluir un filtro de rango de fechas en SonataAdmin que use un calendario para seleccionar la fecha es más o menos fácil. Primero añadimos el siguiente bloque en el admin de nuestra entidad:

<?php

// src/Admin/InvoiceAdmin.php

namespace Acme\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;
use Sonata\DoctrineORMAdminBundle\Filter\DateRangeFilter;
use Sonata\Form\Type\DateTimeRangePickerType;

/**
 *
 * @author Marcos
 */
class InvoiceAdmin extends AbstractAdmin
{
    protected function configureDatagridFilters(DatagridMapper $datagridMapper)
    {
        $datagridMapper->add('createdAt', DateRangeFilter::class, array(
            'label' => 'created_at',
            'field_type' => DateTimeRangePickerType::class
        ));
    }
}
</php>

<?php

// src/Admin/InvoiceAdmin.php

namespace Acme\Admin;

use Sonata\AdminBundle\Admin\AbstractAdmin;

use Sonata\DoctrineORMAdminBundle\Filter\DateRangeFilter;

use Sonata\Form\Type\DateTimeRangePickerType;

/**

* @author Marcos

class InvoiceAdmin extends AbstractAdmin

{

protected function configureDatagridFilters(DatagridMapper $datagridMapper)

{

$datagridMapper->add('createdAt', DateRangeFilter::class, array(

'label' => 'created_at',

'field_type' => DateTimeRangePickerType::class

));

}

</php>

Y la siguiente clave bajo form_themesen el fichero config/packages/twig.yaml:

twig:
    default_path: '%kernel.project_dir%/templates'
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    form_themes:
        - '@SonataForm/Form/datepicker.html.twig'

twig:

default_path: '%kernel.project_dir%/templates'

debug: '%kernel.debug%'

strict_variables: '%kernel.debug%'

form_themes:

- '@SonataForm/Form/datepicker.html.twig'

Problema

El calendario no se cierra automáticamente cuando se selecciona una fecha. Hay que pinchar fuera de la ventana para que desaparezca. Lo cual es un incordio para el pobre usuario.

Solución

Como no podía ser de otra manera, debemos sobreescribir la plantilla que muestra el calendario. Copiamos vendor/sonata-project/form-extensions/src/Bridge/Symfony/Resources/views/Form/datepicker.html.twig en Acme/templates/Form/datepicker.html.twig, nos quedamos con el bloque que nos intersa ( sonata_type_datetime_range_script_block), extendemos el fichero original y añadimos la dos líneas que cierran el calendario cuando se selecciona la fecha:

{% extends '@SonataForm/Form/datepicker.html.twig' %}
{% block sonata_type_datetime_range_script_block %}
    {% apply spaceless %}
        {{ block('form_widget') }}
        <script type="text/javascript">
            jQuery(function ($) {
                var $startDateTimePicker = $('#{{ startId }}');
                var $endDateTimePicker = $('#{{ endId }}');
                $startDateTimePicker.on("dp.change", function (e) {
                    $endDateTimePicker.data("DateTimePicker").setMinDate(e.date);
                    {#cierra el calendario:#}
                    $startDateTimePicker.data("DateTimePicker").widget.hide();
                });
                $endDateTimePicker.on("dp.change", function (e) {
                    $startDateTimePicker.data("DateTimePicker").setMaxDate(e.date);
                    {#cierra el calendario:#}
                    $endDateTimePicker.data("DateTimePicker").widget.hide()
                });
            });
        </script>
    {% endapply %}
{% endblock sonata_type_datetime_range_script_block %}

{% extends '@SonataForm/Form/datepicker.html.twig' %}

{% block sonata_type_datetime_range_script_block %}

{% apply spaceless %}

jQuery(function ($) {

var $startDateTimePicker = $('#{{ startId }}');

var $endDateTimePicker = $('#{{ endId }}');

$startDateTimePicker.on("dp.change", function (e) {

$endDateTimePicker.data("DateTimePicker").setMinDate(e.date);

{#cierra el calendario:#}

$startDateTimePicker.data("DateTimePicker").widget.hide();

});

$endDateTimePicker.on("dp.change", function (e) {

$startDateTimePicker.data("DateTimePicker").setMaxDate(e.date);

{#cierra el calendario:#}

$endDateTimePicker.data("DateTimePicker").widget.hide()

});

</script>

{% endapply %}

{% endblock sonata_type_datetime_range_script_block %}

Por último modificamos form_themesen el fichero config/packages/twig.yaml para que use nuestra plantilla:

twig:
    default_path: '%kernel.project_dir%/templates'
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    form_themes:
        - 'Form/datepicker.html.twig'