我在命令工具doctrine中创建了一个带有日期字段的实体。现在,通常它只显示一个简单的选择框,并且工作正常。现在我想把它渲染为日历,一个日期选择器。不幸的是,我无法做到正确,即使在stackoverflow上有很多问题和答案。我已经尝试过Jquery datepicker,但它仍然是一个文本框,我会告诉你我的代码:
ReserverenType.php
<?php
namespace Codeit\RestaurantBundle\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
class ReserverenType extends AbstractType
{
/**
* @param FormBuilderInterface $builder
* @param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('naam')
->add('datum', 'date' ,array(
'widget'=> 'single_text',
'format'=>'yyyy/MM/dd',
))
->add('tijd')
->add('personen')
->add('email')
->add('opmerkingen')
;
}
/**
* @param OptionsResolverInterface $resolver
*/
public function setDefaultOptions(OptionsResolverInterface $resolver)
{
$resolver->setDefaults(array(
'data_class' => 'Codeit\RestaurantBundle\Entity\Reserveren'
));
}
/**
* @return string
*/
public function getName()
{
return 'codeit_restaurantbundle_reserveren';
}
}
base.html.twig
{% block stylesheets %}
{% stylesheets
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css'
'@CodeitRestaurantBundle/Resources/public/css/jquery-ui.min.css'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{% javascripts
'%kernel.root_dir%/../vendor/components/jquery/jquery.js'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js'
'@CodeitRestaurantBundle/Resources/public/js/jquery-ui.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
new.html.twig
{% extends '::base.html.twig' %}
{% block body -%}
<h1>Maak een reservering</h1>
{{ form(form) }}
<a href='../../restaurant.php'>
<div class="terug" style="margin-top: 10px;"> ← Terug naar restaurant pagina </div>
</a>
<script type=”text/javascript”>
$('.date').datepicker({
showOn: 'button',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
yearRange: "-0:+1"
});
</script>
{% endblock %}
输出:
答案 0 :(得分:0)
使用您在上一个示例中使用的javascript,您需要使用此代码而不是之前的基准字段
$builder->add('datum', 'date' ,array(
'widget'=> 'single_text',
'format'=>'yyyy/MM/dd',
'attr' => ['class' => 'date'],
));