datepickersymfony-2.1jquery-ui-datepickersymfony-sonatasonata-admin

Sonata Admin Bundle: DatePicker range


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')))
    ;
}

Solution

  • 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 enable loading the twig template that contains the related code.

    CONFIGURATION

    For Symfony 4:

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

    For Symfony 3:

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

    For Symfony 2:

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

    USAGE

    You can use the picker in form definition:

        use Sonata\CoreBundle\Form\Type\DatePickerType;
    
        protected function configureFormFields(FormMapper $formMapper)
        {
            $formMapper
                ->add('createdAt', DatePickerType::class);
        }
    

    in the datetime filter:

        use Sonata\CoreBundle\Form\Type\DatePickerType;
    
        protected function configureDatagridFilters(DatagridMapper $datagridMapper)
        {
            $datagridMapper
                    ->add('createdAt', 'doctrine_orm_datetime', ['field_type'=> DatePickerType::class]);
        }
    

    or as datetime range filter:

        use Sonata\CoreBundle\Form\Type\DateTimeRangePickerType;
    
        protected function configureDatagridFilters(DatagridMapper $datagridMapper)
        {
            $datagridMapper
                    ->add('createdAt', 'doctrine_orm_datetime_range', ['field_type'=> DateTimeRangePickerType::class]);
        }
    

    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" ]);
     });