如何自定义django-filter的DateTimeFromToRangeFilter并拆分模板表单控件

完全可以将work_date的日期范围控件拆分为两个独立输入框，无需修改后端的FilterSet代码，直接在模板中自定义渲染即可，具体实现方式如下：

核心原理 #

DateTimeFromToRangeFilter对应的表单字段是RangeField，它的默认widgetRangeWidget本身就是由两个子输入框组成的容器，分别对应日期范围的起始值和结束值。在模板中可以直接通过.start和.end访问这两个子控件，从而单独渲染每个输入框。

模板渲染示例 #

方式一：手动渲染输入框（完全自定义） #

<div class="date-range-wrapper">
    <!-- 起始日期输入框 -->
    <div class="form-group">
        <label for="{{ form.work_date.start.id_for_label }}">起始日期</label>
        <input type="date"
               id="{{ form.work_date.start.id_for_label }}"
               name="{{ form.work_date.start.name }}"
               class="form-control"
               value="{{ form.work_date.start.value|default:'' }}">
        {% if form.work_date.start.errors %}
            <small class="text-danger">
                {% for error in form.work_date.start.errors %}
                    {{ error }}
                {% endfor %}
            </small>
        {% endif %}
    </div>

    <!-- 结束日期输入框 -->
    <div class="form-group">
        <label for="{{ form.work_date.end.id_for_label }}">结束日期</label>
        <input type="date"
               id="{{ form.work_date.end.id_for_label }}"
               name="{{ form.work_date.end.name }}"
               class="form-control"
               value="{{ form.work_date.end.value|default:'' }}">
        {% if form.work_date.end.errors %}
            <small class="text-danger">
                {% for error in form.work_date.end.errors %}
                    {{ error }}
                {% endfor %}
            </small>
        {% endif %}
    </div>
</div>

方式二：用render_field简化渲染 #

如果项目中已经在使用django-widget-tweaks的render_field标签，也可以直接分别渲染两个子控件：

<div class="row">
    <div class="col-sm-6">
        {% render_field form.work_date.start class="form-control" type="date" label="起始日期" %}
    </div>
    <div class="col-sm-6">
        {% render_field form.work_date.end class="form-control" type="date" label="结束日期" %}
    </div>
</div>

这样就能完全自定义两个输入框的布局、样式和标签文本，同时保留原有的表单验证和数据提交逻辑。

内容的提问来源于stack exchange，提问作者Kirill_N