如何将日期选择器与 django-filter 一起使用？答案

【问题标题】：How can I use Date Picker with django-filter?如何将日期选择器与 django-filter 一起使用？
【发布时间】：2018-08-09 19:48:42
【问题描述】：

我想弄清楚如何将 datepicker 与 django-filter 一起使用。我已经尝试了一堆小部件，但它不工作。任何建议将不胜感激！

我想将 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>

【问题讨论】：

标签： django datepicker django-filter

【解决方案1】：

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

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

如果你需要日期范围过滤器，你可以使用 DateFromToRangeFilter 代替 DateFilter

【讨论】：

它首次在 firefox 和 edge（基于 choomium）上工作。谢谢

【解决方案2】：

目前还不太清楚你想到了什么样的日期选择器，但我假设你想要这样的东西：
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" ... />

【讨论】：

【解决方案3】：

为了提供类似于 cezar 的答案的另一个答案，我在下面使用我的过滤器和模板代码这样做了。

filter.py

import django_filters
from .models import Product
from django import forms

class ProductFilter(django_filters.FilterSet):
    name = django_filters.CharFilter(lookup_expr='icontains')
    price = django_filters.NumberFilter()

    # using jquery
    djfdate_time = django_filters.DateFilter(
        lookup_expr='icontains',
        widget=forms.DateInput(
            attrs={
                'id': 'datepicker',
                'type': 'text'
            }
        )
    )

    class Meta:
        model = Product
        fields = ['name', 'djfdate_time','price']

base.html

{% load static %}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="{% static 'css/search.css' %}">
        <title></title>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>
        <div id="header">
            <h1 ><a class="searchtitle" href="/">Django Filter Example</a></h1>
        </div>
        <div id="content">
            {% block content %}
            {% endblock %}
        </div>

        <script>
        $( function() {
            $( "#datepicker" ).datepicker();
        } );
        </script> 
    </body>
</html>

base_extension.html

{% extends "base.html" %}
{% load my_templatetags %}

{% block content %}
    <form action="" method="get">
        <div>Name{{ filter.form.name }}</div>
        <div>Price{{ filter.form.price }}</div>
        <div>Date_Time{{ filter.form.djfdate_time }}</div>
        <input type="submit" />
    </form>

    {% for obj in dataqs.object_list %}  
        {{ obj.name }}
            <div>
                <li>${{ obj.price }}</li>
                <li> {{ obj.djfdate_time|date:'m-d H:i:s.u' }}</li>
            </div>
    {% endfor %}

{% endblock %}

【讨论】：