如何使它以Symfony形式的Clockpicker工作？
我试图建立一个友好的界面来选择TIME并将其保存到数据库，所以我决定使用引导时钟选择器。 这是我的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 © 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 %}
这是我的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 %}
我遵循了使用Clockpicker的说明，实际上我已经创建了一个简单的HTML文件并且可以使用，但是我无法在symfony应用程序中使用它，您对我的代码有任何想法吗，我有可能做错了吗？
这是我的表格：
<?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';
}
}
它看起来像这样：
谢谢你的建议。
1 个答案:
答案 0 :(得分：1)
在表单类型类中，您需要向该字段中添加“ clockpicker” css类，
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');
}
或者，在表单树枝中，您也可以设置“ clockpicker”类，如下所示：
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？