使用控制器在symfony 5上引导日期范围

问题描述

我正在尝试使用自举日期范围添加日期范围输入（它是双日期选择器输入）。

从“ bootstrap date-range”文档中，他们解释说我需要这种结构：

<div class="input-group input-daterange">
    <input type="text" class="form-control" value="2012-04-05">
    <div class="input-group-addon">to</div>
    <input type="text" class="form-control" value="2012-04-19">
</div>

我正在使用控制器将参数发送到视图。 您认为不编辑视图（树枝）就可以做到吗？您能向我解释一下吗？

我当前的控制器：

$form = $this->createFormBuilder($recording)
                     ->add('starting_date',DateType::class,[
                        'widget'=>'single_text','html5'=>false,'attr'=>['class'=>'js-datepicker'],'format'=>'yyyy-mm-dd','label'=>'Starting time','row_attr'=>[
                            'class'=>'input-daterange'
                        ]
                     ])
                     ->add('ending_date','label'=>'Ending time','row_attr'=>[
                            'class'=>'input-daterange'
                        ]
                     ])

问题是每个输入都添加到特定的div上...但是我需要将两个输入都放在一个输入上。

解决方法

我按照以下方式处理了此案：

首先，我用两个日期字段创建一个表单：

      <?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class BookingSearchType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder,array $options)
    {
        $builder
            ->add('dateMin',DateType::class,[
                'widget' => 'single_text','html5' => false,])
            ->add('dateMax',]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            // Configure your form options here
        ]);
    }
}

然后，在控制器中创建表单：

      /**
     * @Route("/bookings-for-date",name="bookings_for_date")
     */
    public function bookingForDates(Request $request,BookingRepository $bookingRepository)
    {
        $form = $this->createForm(BookingSearchType::class);
        $bookings = [];
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            $bookings = $bookingRepository->findBookingsBetweenDates($form['dateMin']->getData(),$form['dateMax']->getData());
        }
        return $this->render('report/bookings_for_date.html.twig',[
            'form' => $form->createView(),'bookings' => $bookings,]);
    }

然后，在视图中，我仅显示包装了正确的包装div的小部件：

 {{ form_start(form) }}
<div class="input-group input-daterange">
    {{ form_widget(form.dateMin) }}
    <div class="input-group-addon">to</div>
    {{ form_widget(form.dateMax) }}
</div>
<input class="btn btn-primary" type="submit">
{{ form_end(form) }}

最后是js：

$(function () {
    $('.datepicker,.input-daterange').datepicker({
        format: 'yyyy-mm-dd',language: 'fr',todayHighlight: true,todayBtn: 'linked',daysOfWeekDisabled: [0,6],});
});