django 表单和过滤器 - 如何呈现 DateFromToRangeFilter 以便起始和结束输入字段位于一行？

Question

我正在尝试使用 django-filter DateFromToRangeFilter。问题是小部件始终呈现为堆栈。我想要的是两个输入字段并排。我所做的一切都无法改变这一点。结果如下：[这是按日期范围区域过滤的]

该字段的filters.py定义为：

change_date = DateFromToRangeFilter(field_name='change_date',
                                        label='Filter by Date Range:',
                                        widget=RangeWidget(attrs={'type': 'date'}))

change_date 是 django-tables2

DateColumn

。那里没什么特别的。

表单是使用crispy定义的：[这是布局]

self.helper.layout = Layout(
            Div(
                Div(
                    InlineCheckboxes('category'),
                    css_class="border bg-light",
                ),
                Div(
                    Field('change_date', css_class='form-control form-control-sm'),
                    css_class="border d-flex flex-row ",
                ),
                Div(
                    Submit('submit', 'Filter', css_class="btn btn-sm btn-primary"),
                    HTML(my_url),
                    css_class="col-md",
                ),
                css_class="d-flex flex-row g-2",
            ),
        )

如果我检查 html 代码，它看起来像：

无论我如何定义布局，这两个字段都保持堆叠状态。

div id=div_id_change_date

似乎是事情需要改变的地方。如何使这两个输入字段内联布局？我必须创建自定义小部件吗？谢谢。

Answer 1

在这里找到答案的路径：另一个 stackoverflow 问题：html 表单 - 让输入出现在同一行

一个可行的解决方案，但可能应该改进，是添加一些CSS：

.date-block {
  display: flex;
  flex-direction: row;
}

.date-block > div {
  display: flex;
  flex-direction: row;
}

.date-block > input, label {
  display: block;
}

然后更新表格：

Div(
     FloatingField('intake'),
     css_class="col-2 small date-block"
),

可能更好的方法是提出我自己的脆皮模板，以消除过滤器/表单生成的两个

DIV

和

INPUT

标签周围的

LABEL

。