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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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> |
1 2 3 4 5 6 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{% 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 %} |
1 2 3 4 5 6 |
twig: default_path: '%kernel.project_dir%/templates' debug: '%kernel.debug%' strict_variables: '%kernel.debug%' form_themes: - 'Form/datepicker.html.twig' |