如何在django-filter中使用Date Picker？

Question

我试图弄清楚如何将django-filter与datepicker一起使用。我已经尝试了很多小部件，但无法正常工作。任何建议将不胜感激！

我想将datepicker用于row_date搜索过滤器。

filters.py

from home2.models import AvailstaticCopy
from django import forms

import django_filters

class DateInput(forms.DateInput):
    input_type = 'date'

class AvailFilter(django_filters.FilterSet):

    class Meta:
        model   = AvailstaticCopy
        widgets = {'row_date': DateInput(),}
        fields  = ['row_date', 'director','manager','analyst',]

这是我的模板

{% load widget_tweaks %}
<form method="get">
  <div class="well">
    <h4 style="margin-top: 0">Filter</h4>
    <div class="row">
      <div class="form-group col-sm-4 col-md-3">
        {{ filter.form.row_date.label_tag }}
        {% render_field filter.form.row_date class="form-control" %}
      </div>
      <div class="form-group col-sm-4 col-md-3">
        {{ filter.form.director.label_tag }}
        {% render_field filter.form.director class="form-control" %}
      </div>
      <div class="form-group col-sm-8 col-md-6">
        {{ filter.form.manager.label_tag }}
        {% render_field filter.form.manager class="form-control" %}
      </div> 
      <div class="form-group col-sm-8 col-md-6">
        {{ filter.form.analyst.label_tag }}
        {% render_field filter.form.analyst class="form-control" %}
      </div> 
      <div class="form-group col-sm-8 col-md-6">
        <button type="submit" class="btn btn-primary">
          <span class="glyphicon glyphicon-search"></span> Search
        </button>
      </div>
    </div>
  </div>
</form>

Answer 1

不太清楚您想到的是哪种日期选择器，但我假设您想要这样的东西：
jQuery UI Datepicker

我希望你知道如何使用第三方 JavaScript 库。这应该超出了这个问题的范围。

将项目设置为使用 jQuery UI 后，您可以更改filters.py：

class AvailFilter(django_filters.FilterSet):
    row_date = django_filters.DateFilter(
        widget=DateInput(
            attrs={
                'class': 'datepicker'
            }
        )
    )

    class Meta:
        # keep everything but the line widgets

您使用的任何小部件都接受一个attrs带有字典的关键字参数，您可以在其中指定 HTML 标签的所有属性。

现在，当您渲染row_date它时，它应该输出如下内容：

<input type="date" class="datepicker" ... />

Answer 2

type="date" 无需任何小部件即可帮助您（取决于浏览器）：

class AvailFilter(django_filters.FilterSet):
    row_date = django_filters.DateFilter(widget=DateInput(attrs={'type': 'date'}))

此外，如果您需要日期范围过滤器，您可以使用 DateFromToRangeFilter 而不是 DateFilter