Блог

Я пытаюсь добавить ввод диапазона дат (который является двойным вводом для выбора даты), используя диапазон дат начальной загрузки.

Из документации «диапазон дат начальной загрузки» они объясняют, что мне нужна эта структура :

 <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>
  

Я использую свой контроллер для отправки параметров в представление.
Как вы думаете, возможно ли это сделать без редактирования представления (twig) и можете ли вы объяснить мне, как?

Мой текущий контроллер :

 $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', DateType::class, [
                        'widget'=>'single_text',
                        'html5'=>false,
                        'attr'=>['class'=>'js-datepicker'],
                        'format'=>'yyyy-mm-dd',
                        'label'=>'Ending time',
                        'row_attr'=>[
                            'class'=>'input-daterange'
                        ]
                     ])
  

Проблема в том, что каждый ввод добавляется в определенный div… но мне нужны оба входных данных для одного.

Я справился с этим случаем следующим образом:

Сначала я создаю форму с двумя полями даты :

       <?php

namespace AppForm;

use SymfonyComponentFormAbstractType;
use SymfonyComponentFormExtensionCoreTypeDateType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentOptionsResolverOptionsResolver;

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

    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() amp;amp; $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],
    });
});