如何在Symfony2表单生成器中获取日期Datepicker

时间:2015-12-11 01:35:38

标签: jquery symfony date doctrine-orm datepicker

我在命令工具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;">  &larr; 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 %}

输出:

output form

1 个答案:

答案 0 :(得分:0)

使用您在上一个示例中使用的javascript,您需要使用此代码而不是之前的基准字段

$builder->add('datum', 'date' ,array( 'widget'=> 'single_text', 'format'=>'yyyy/MM/dd', 'attr' => ['class' => 'date'], ));