How can I make it work clockpicker in Symfony forms? - symfony

Question

I'm trying to make a friendly interface to select TIME and save it to database, so I decided to use bootstrap clockpicker.
This is my layout.html.twig:
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link href="{{ asset('public/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('public/css/estilo.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('public/css/dataTables.bootstrap.min.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('public/css/bootstrap-select.min.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('public/css/datepicker.css') }}" type="text/css" rel="stylesheet" />
<link href="{{ asset('public/css/dist/bootstrap-clockpicker.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
{% block header %}
{% set empresa = app.session.get('empresa') %}
<div class="container header">
<div class="row">
<div class="col-md-2">
{% set env = app.environment %}
{% if env == 'dev' %}
{% set app_link = 'app_dev.php' %}
{% else %}
{% set app_link = 'app.php' %}
{% endif %}
<a href="{{ asset(app_link) }}">
<img src="{{ asset('public/images/logo.png') }}" class="img-responsive"/>
</a>
</div>
<div class="col-md-10">
<h3 class="text-gray">Sistema de planificación de recursos empresariales</h3>
<p class="text-gray" style="font-size: 1.1em;">Centuria version 1.1<br>
{% if empresa|length %}
{{ empresa }}
{% else %}
Potenciado por Symfony 3.4
{% endif %}
</p>
</div>
</div>
<div class="top_div_line"> </div>
</div>
{% endblock %}
{% block body %}
<div id="layout" class="container">
<div class="row">
<div class="col-md-12">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<div class="container footer navbar-default navbar-fixed-bottom">
<p class="text-center text-gray">Derechos de copia reservados &copy MG Datos</p>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('public/js/jquery-3.2.1.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('public/js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('public/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('public/js/dataTables.bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('public/js/bootstrap-select.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('public/js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
<script src="{{ asset('public/js/dist/bootstrap-clockpicker.js') }}" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#ftable').DataTable({
stateSave: true,
language: {
"emptyTable": "No hay datos disponibles en la tabla",
"info": "Mostrando _START_ hasta _END_ de _TOTAL_ registros",
"infoEmpty": "Mostrando 0 hasta 0 de 0 registros",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Siguiente",
"previous": "Anterior"
},
"infoFiltered": "(filtrados de _MAX_ registros)"
}
});
$('#ftable2').DataTable({
stateSave: true,
language: {
"emptyTable": "No hay datos disponibles en la tabla",
"info": "Mostrando _START_ hasta _END_ de _TOTAL_ registros",
"infoEmpty": "Mostrando 0 hasta 0 de 0 registros",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Siguiente",
"previous": "Anterior"
},
"infoFiltered": "(filtrados de _MAX_ registros)"
}
});
$('.selectpicker').selectpicker({
size: 8
});
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
autoclose: true
});
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['es']);
$('.clockpicker').clockpicker();
} );
</script>
{% endblock %}
And this is my new.html.twig:
{% extends '#CenturiaMain/Default/index.html.twig' %}
{% block content %}
{% block centuria_menu %}
{{ parent() }}
{% endblock %}
<div class = "main container">
<div class = "row well col-md-12" style = margin-bottom:55px;">
<h3>Nuevo registro</h3>
{{ form_start(form) }}
<div class = "form-group col-md-4">
{{ form_widget(form.idCambiosplanilla, { 'attr':{'hidden':'hidden'} }) }}
<div class = "form-group col-md-12">
<h5>Fecha</h5>{{ form_widget(form.fecha, { "attr" : {"class" : "form-control datepicker"}}) }}
<span class = "text-danger">{{ form_errors(form.fecha) }}</span>
</div>
<div class="input-group clockpicker " data-autoclose="true">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<input type="text" class="form-control" value="09:30" />
</div>
<div class = "form-group col-md-6">
<h5>Horario: Desde</h5>{{ form_widget(form.horarioInicio, { "attr" : {"class" : "form-control clockpicker-control"}}) }}
<span class = "text-danger">{{ form_errors(form.horarioInicio) }}</span>
</div>
<div class = "form-group col-md-6">
<h5>Hasta</h5>{{ form_widget(form.horarioFinal) }}{{ form_widget(form.horarioFinal) }}
<span class = "text-danger">{{ form_errors(form.horarioFinal) }}</span>
</div>
<br>
<a href="{{ path('centuria_cambiosplanilladetalle', {'idCd' : 1}) }}"
class = "btn btn-warning glyphicon glyphicon-arrow-left"></a>
<input type="submit" class="btn btn-success glyphicon glyphicon-ok" value="" />
</div>
{{ form_end(form) }}
</div>
</div>
{% endblock %}
I have followed the instrucctions to use clockpicker, In fact I have created a simple HTML file and It works, But I can not make it work in my symfony application, do you have any ideas regarding my code, what I am possible doing wrong?
This is my form:
<?php
namespace Centuria\MainBundle\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\TimeType;
class CambiosplanilladetalleType extends AbstractType
{
/**
* {#inheritdoc}
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('idCambiosplanilla')->add('idEmpleado')->add('fecha', TextType::class)->add('horarioInicio', TimeType::class)->add('horarioFinal')->add('extraInicio')->add('extraFinal')->add('tiempoTotal')->add('idAsignacion')->add('fechaRegistro')->add('horaRegistro')->add('idUsuario');
}/**
* {#inheritdoc}
*/
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'Centuria\MainBundle\Entity\Cambiosplanilladetalle'
));
}
/**
* {#inheritdoc}
*/
public function getBlockPrefix()
{
return 'centuria_mainbundle_cambiosplanilladetalle';
}
}
And It appears like this:
Thank you in advice.

Answer 1

In your form type class, you need to add the "clockpicker" css class to the field, like so
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('idCambiosplanilla')
->add('idEmpleado')
->add('fecha', TextType::class)
->add('horarioInicio', TimeType::class, [
'attr' => [
'class' => 'form-control clockpicker-control clockpicker',
]
])
->add('horarioFinal', )
->add('extraInicio')
->add('extraFinal')
->add('tiempoTotal')
->add('idAsignacion')
->add('fechaRegistro')
->add('horaRegistro')
->add('idUsuario');
}
alternatively, in your form twig, you could also set the "clockpicker" class, like so:
<div class = "form-group col-md-6">
<h5>Horario: Desde</h5>{{ form_widget(form.horarioInicio, { "attr" : {"class" : "form-control clockpicker-control clockpicker"}}) }}
<span class = "text-danger">{{ form_errors(form.horarioInicio) }}</span>
</div>