如何为django-filter的row_date搜索过滤器配置Date Picker？

嘿，我刚好碰到过类似的困扰，给你一套亲测有效的解决方案，分两步搞定：

第一步：在filters.py中配置Widget #

首先要给row_date字段指定带自定义属性的Widget，这样既可以触发浏览器原生日期选择器，也能给第三方JS插件提供识别标记：

import django_filters
from .models import 你的模型类名
from django.forms.widgets import DateInput

class 你的FilterSet类名(django_filters.FilterSet):
    row_date = django_filters.DateFilter(
        widget=DateInput(attrs={
            'type': 'date',  # 触发浏览器原生日期选择器（无需额外JS）
            'class': 'datepicker'  # 给第三方日期插件用的类标识
        })
    )

    class Meta:
        model = 你的模型类名
        fields = ['row_date']

如果原生日期选择器满足不了需求（比如需要自定义格式、范围选择等），可以用第三方插件，比如Flatpickr或jQuery UI Datepicker，接下来处理模板层。

第二步：模板中引入并初始化日期选择器 #

方案1：使用浏览器原生日期选择器 #

如果用上面的type='date'配置，不需要额外JS，直接渲染表单即可：

<form method="get">
    {{ filter.form.as_p }}
    <button type="submit">搜索</button>
</form>

注意：原生日期选择器的显示效果会因浏览器不同略有差异，且格式默认是YYYY-MM-DD，要和Django的DATE_INPUT_FORMATS匹配（默认就是这个格式，无需额外配置）。

方案2：使用第三方插件（以Flatpickr为例） #

如果需要更灵活的自定义，推荐用Flatpickr：

1. 先把Flatpickr的CSS和JS文件下载到项目的静态文件目录（比如static/flatpickr/）
2. 在模板中引入资源并初始化：

<!-- 头部引入CSS -->
<link rel="stylesheet" href="{% static 'flatpickr/flatpickr.min.css' %}">

<!-- 表单渲染 -->
<form method="get">
    {{ filter.form.as_p }}
    <button type="submit">搜索</button>
</form>

<!-- 底部引入JS并初始化 -->
<script src="{% static 'flatpickr/flatpickr.min.js' %}"></script>
<script>
    // 给所有带datepicker类的元素绑定日期选择器
    flatpickr('.datepicker', {
        dateFormat: 'Y-m-d',  // 必须和Django的日期格式匹配
        allowInput: true,
        disableMobile: true,  // 禁用移动端原生控件，统一用Flatpickr
        // 可添加更多配置，比如禁用过去日期：minDate: "today"
    });
</script>

关键注意事项 #

• 确保日期格式完全匹配：Django默认的日期解析格式是YYYY-MM-DD，如果自定义了DATE_INPUT_FORMATS，一定要同步修改前端插件的格式。
• 检查静态资源路径是否正确，打开浏览器控制台看有没有404报错。
• 如果用了表单渲染库（比如django-crispy-forms），要确认Widget的class属性被正确渲染到HTML元素上。

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