How to customize DateRangeFilterType theme

[davidnectarestudio]

I need to render this date range filter:

But I'm showing this:

Which block theme I need to override?

use App\Shared\Infrastructure\DataTable\Filter\Type\DateRangeFilterType;

final class AirlineGroupQuotationAgencyDataTableType extends AbstractDataTableType
{
    public function buildDataTable(DataTableBuilderInterface $builder, array $options): void
    {
        $builder
            // filters
            ->addFilter(
                'departureDate',
                DateRangeFilterType::class,
                [
                    'label' => 'departure_date_table_header',
                ]
            )

[davidnectarestudio]

@Kreyu can you help me with this issue? It seems that is related with a form theme block, but I can't see which one...

Which is the underlying form type used for data ranges? And its Twig block prefix?

[maciazek]

It's called kreyu_data_table_date_range_widget - in Bootstrap theme it uses input group to display two child fields in single line:

data-table-bundle/src/Resources/views/themes/bootstrap_5.html.twig

Lines 980 to 986 in 2df63d0

	{% block kreyu_data_table_date_range_widget %}
	<div class="input-group">
	{{ form_widget(form.from) }}
	<span class="input-group-text">-</span>
	{{ form_widget(form.to) }}
	</div>
	{% endblock %}

[davidnectarestudio]

thank you so much @maciazek !

[davidnectarestudio]

Finally I need to apply a custom placeholder text into each field (from and to). How can I achieve it? Digging into source code here I can see:

namespace Kreyu\Bundle\DataTableBundle\Filter\Form\Type;

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

class DateRangeType extends AbstractType implements DataMapperInterface
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('from', DateType::class, [
                'widget' => 'single_text',
                'label' => false,
                'attr' => [
                    'autocomplete' => 'off',
                ],
            ])
            ->add('to', DateType::class, [
                'widget' => 'single_text',
                'label' => false,
                'attr' => [
                    'autocomplete' => 'off',
                ],
            ])
            ->setDataMapper($this)
        ;
    }

[davidnectarestudio]

{% block kreyu_data_table_date_range_widget %}
    <div class="flex items-center gap-2">
        {{ form_widget(form.from, {'attr': {'placeholder': 'Date Range Filter From Placeholder' | trans({}, 'KreyuDataTable') }}) }}
        {{ form_widget(form.to, {'attr': {'placeholder': 'Date Range Filter To Placeholder' | trans({}, 'KreyuDataTable') }}) }}
    </div>
{% endblock %}