Date format - incorrect styling with Tailwind / Flowbite styles

[xVinniVx]

When I set the date format, to something other than MMddyyyy the select fields change place and it doesn't look good.

How can I deal with this?

Below is a screenshot when the DateType format is: “ddMMyyyy”

[ker0x]

Hello @xVinniVx

Currently the theme only support displaying the DateType in US format

Until I fixed this, the workaround is to either set the DateType widget option to single_text or override the date_widget block in a custom form theme:

# templates/form/layout.html.twig

{% use '@TalesFromADevFlowbite/form/default.html.twig' %}

{%- block date_widget -%}
    {%- if widget == 'single_text' -%}
        {{ block('form_widget_simple') }}
    {%- else -%}
        {%- set attr = attr|merge({'class': attr.class|default('flex')|trim}) -%}
        {%- set attr_class_error = '' -%}
        {%- if not valid -%}
            {%- set attr_class_error = ' ' ~ block('class_input_error') -%}
        {%- endif -%}
        <div {{ block('widget_container_attributes') }}>
            {{- date_pattern|replace({
                '{{ day }}': form_widget(form.month, { attr: { class: (block('class_widget_addon_prepend') ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}),
                '{{ month }}': form_widget(form.day, { attr: { class: ('rounded-none' ~ attr_class_error)|trim|tailwind_merge }}),
                '{{ year }}': form_widget(form.year, { attr: { class: (block('class_widget_addon_append') ~ ' ' ~ attr_class_error|trim|tailwind_merge) }}),
            })|raw -}}
        </div>
    {%- endif -%}
{%- endblock date_widget -%}