Sonata Admin Bundle es una excelente forma de crear un backend para nuestros proyectos con Symfony de forma rápida y con un resultado muy profesional. Sin embargo, es un grupo de bundles muy complejos y con una documentación bastante caotica. Por eso en ocasiones nos encontramos con que habilitar algo aparentemente simple puede convertirse en una tarea titánica que nos haga desistir.
Hoy os mostramos como incluir un datepicker para introducir vuestros valores de tipo fecha.
Input Type Date
Cuando queremos insertar un valor de tipo fecha parecería razonable utilizar html5 y ciertamente funciona muy bien en navegadores como Chrome. Sin embargo, Firefox y IE muestran un input de tipo texto normal y corriente lo que no es muy recomendable.
Como parece que esta situación no va a cambiar en un futuro próximo, vamos a usar un datepicker javascript. Si miramos el código de cualquier página de nuestro administrado, vemos que ya están incluidas las librerías jquery-ui debe de existir un modo de usarlas (sin tener que hacer muchos esfuerzos).
El tipo de formulario: sonata_type_date_picker
Navegando un poco por Internet encontramos que existen los tipos: sonata_type_date_picker y sonata_type_datetime_picker. Podemos usarlos comodamente:
|
1 2 3 4 5 |
protected function configureFormFields(FormMapper $formMapper) { $formMapper ->add('createdAt', 'sonata_type_date_picker'); } |
Tras probarlo nos damos cuenta de que algo falla pues seguimos sin obtener nuestro datepicker y tenemos nuestro input de texto normal.
Incluimos la plantilla datepicker.html.twig
Resulta que hace falta configurar twig para que use la plantilla del datepicker, que por alguna razón no está incluida por defecto.
Si usamos Symfony 3.X
|
1 2 3 4 5 |
# app/config/config.yml twig: # ... form_themes: - 'SonataCoreBundle:Form:datepicker.html.twig' |
Si usamos Symfony 2.X
|
1 2 3 4 5 |
twig: # ... form: resources: - 'SonataCoreBundle:Form:datepicker.html.twig' |
Una vez hecho esto, ya tenemos nuestro datepicker funcionando.
Como usarlo fuera de un formulario
Lo siguiente que nos preguntamos es, ¿podemos usarlo para filtrar los listados?. Por supuesto, y además de forma bastante sencilla:
|
1 2 3 4 5 |
protected function configureDatagridFilters(DatagridMapper $datagridMapper) { $datagridMapper ->add('createdAt', 'doctrine_orm_datetime', array('field_type'=>'sonata_type_datetime_picker',)); } |
Espero que os haya resultado útil.
hola.
Me ha resultado muy util pero. donde se toca en los formularios
si tengo el formulario de usuario. como lo modifico?
Gracias por tu comentario y me alegro de que te resultará útil.
Viene explicado en el artículo en la sección «El tipo de formulario: sonata_type_date_picker». Básicamente en la clase que especifica la configuración del administrador de esa entidad de sonata tenemos un método encargado del formulario de creación / edición. Solo tenemos que añadir el campo deseado especificando que sea del tipo sonata_type_date_picker o sonata_type_datetime_picker:
protected function configureFormFields(FormMapper $formMapper)
{
$formMapper
->add('createdAt', 'sonata_type_date_picker');
}