Sonata Admin Bundle: DatePicker range
Solution 1
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" ]);
});
Solution 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.
Solution 3
If you need a datetime range filter in Symfony 4
you can use:
# config/packages/twig.yml
twig:
form_themes:
- '@SonataCore/Form/datepicker.html.twig'
Attention: for Sonata 3 you must use:
# config/packages/twig.yml
twig:
form_themes:
- '@SonataForm/Form/datepicker.html.twig'
admin class:
use Sonata\CoreBundle\Form\Type\DateTimeRangePickerType;
protected function configureDatagridFilters(DatagridMapper $datagridMapper): void
{
$datagridMapper->add(
'createdAt',
'doctrine_orm_datetime_range', [
'field_type'=> DateTimeRangePickerType::class,
]);
}
Solution 4
for Sonata 3 you must use @SonataForm instead of @SonataCore:
# config/packages/twig.yml
twig:
form_themes:
- '@SonataForm/Form/datepicker.html.twig'
Solution 5
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,
]);
}
Related videos on Youtube
Jeroen
Updated on July 09, 2022Comments
-
Jeroen almost 2 years
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'))) ; }
-
Onema over 10 yearsI followed your instructions, and it all works as expected until I hit the "Filter" button. I get a validation error for the date fields "This value is not valid." the one thing I'm currently doing different is I'm using the
'input_type' => 'timestamp'
, other than that is the same. The default date_range widget works just fine for me. Any ideas why? -
Onema over 10 yearsThe key to my problem was to set the correct format:
'format' => 'M/d/y'
-
Steven about 9 yearsIt seems that this solution does not work any more with Symfony 2.6 ... But :
$datagridMapper->add('expirationDate','doctrine_orm_date_range',['field_type' => 'sonata_type_date_range' , 'field_options'=> array('widget' => 'single_text', 'required' => false, 'attr' => array('class' => 'datepicker'))]);
Did the trick for me ! -
kunicmarko20 about 7 yearsJust what I was looking for, you only need to add template for date picker to config file also.
-
iloo over 5 yearsFor those willing to use
doctrine_orm_datetime_range
, the format will be'format' => 'yyyy-MM-dd HH:mm:ss'
. -
Owais Aslam almost 5 yearsthis is not working fine when we filter some data by any date, the filter got removed.