Sonata Admin Bundle: DatePicker range

Question

How would I create a doctrine_orm_datetime_range filter in the Sonata Admin Bundle which uses the jQuery UI datepicker?

I tried the following, but it doesn't work:

protected function configureDatagridFilters(DatagridMapper $datagridMapper)
{
    $datagridMapper
        ->add('datumUitgevoerd', 'doctrine_orm_datetime', array('widget' => 'single_text'), null, array('required' => false,  'attr' => array('class' => 'datepicker')))
    ;
}

Answer 1

UPDATED 2016-02-02

If you are using 3.* Symfony the following twig configuration must be used:

# app/config/config.yml twig: # ... form_themes: - 'SonataCoreBundle:Form:datepicker.html.twig'

UPDATED 2015-05-04

Using custom date picker is not needed anymore. Sonata contains native datetime picker, that works well with Twitter Boostrap.

To activate the datetime picker form fields, you have to add SonataCoreBundle:Form:datepicker.html.twig in the twig form resources in app/config.yml:

twig:
    # ...
    form:
        resources:
            - 'SonataCoreBundle:Form:datepicker.html.twig'

You can use the picker in form:

protected function configureFormFields(FormMapper $formMapper)
{
    $formMapper
        ->add('createdAt', 'sonata_type_date_picker');
}

in the datetime filter:

protected function configureDatagridFilters(DatagridMapper $datagridMapper)
{
    $datagridMapper
            ->add('createdAt', 'doctrine_orm_datetime', array('field_type'=>'sonata_type_datetime_picker',));
}

or as datetime range filter:

protected function configureDatagridFilters(DatagridMapper $datagridMapper)
{
    $datagridMapper
            ->add('createdAt', 'doctrine_orm_datetime_range', array('field_type'=>'sonata_type_datetime_range_picker',));
}

OLD ANSWER

To use datePicker in doctrine_orm_datetime use this code:

protected function configureDatagridFilters(DatagridMapper $datagridMapper)
{
    $datagridMapper->add('datumUitgevoerd', 'doctrine_orm_datetime', array(), null, array('widget' => 'single_text', 'required' => false,  'attr' => array('class' => 'datepicker')));
}

Or to use datePicker in doctrine_orm_datetime_range the code should look like:

protected function configureDatagridFilters(DatagridMapper $datagridMapper)
{
    $datagridMapper->add('datumUitgevoerd', 'doctrine_orm_datetime_range', array(), null, array('widget' => 'single_text', 'required' => false,  'attr' => array('class' => 'datepicker')));
}

And you should overload main template to add your custom javascript file to initialize DatePicker.

#File app/config.yml
sonata_admin:
    title:      Admin
    title_logo: /logo_admin.png
    templates:
        layout: AcmeDemoBundle::standard_layout.html.twig  
 #...another Sonata and Symfony settings...

{# File src/Acme/Bundle/DemoBundle/Resources/views/standard_layout.html.twig #}
{% extends 'SonataAdminBundle::standard_layout.html.twig' %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/acmedemo/js/jquery_admin.js') }}" type="text/javascript"></script>
 {% endblock %}

 //File web\bundles\acmedemo\js\jquery_admin.js
 jQuery(document).ready(function(){
      jQuery.datepicker.setDefaults( jQuery.datepicker.regional[ "" ] );
      jQuery(".datepicker").datepicker( jQuery.datepicker.regional[ "en" ]);
 });

Answer 2

I know that it's old topic, but it helps me a bit anyway, so maybe it will help somebody in the future.

I've find a way to set up a date format for datepicker:

$datagridMapper->add('createdAt', 'doctrine_orm_date_range', [
    'field_type'=>'sonata_type_date_range_picker',
    'field_options' => [
        'field_options' => [
            'format' => 'yyyy-MM-dd'
        ]
    ]
]);

On default that format parametr is set up in Sonata\CoreBundle\Form\Type\DatePickerType.

Answer 3

In Symfony 4 I had to do the following for datetime filter:

# config/packages/twig.yml
twig:
    form_themes:
        - '@SonataCore/Form/datepicker.html.twig'

And in my admin class I had to configure the filter like this:

use Sonata\CoreBundle\Form\Type\DateTimePickerType;

...

protected function configureDatagridFilters(DatagridMapper $datagridMapper): void
{
    $datagridMapper->add('createdAt', 'doctrine_orm_datetime', [
        'field_type'=> DateTimePickerType::class,
    ]);
}