问题
I am trying to figure out how can I use datepicker with django-filter. I have tried a bunch of widgets but it's not working. Any suggestions will be appreciated!
I want to use datepicker for the row_date search filter.
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',]
This is my template
{% 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>
回答1:
It is not very clear what kind of datepicker you think of, but I assume you'd like to have something like this:
jQuery UI Datepicker
I hope you know how to use a third party JavaScript library. That should be out of the scope of this question.
Once you have set up your project to use jQuery UI you can change your 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
Any widget you use accepts a keyword argument attrs
which takes a dictionary, where you can specify all attributes of an HTML tag.
Now when you render row_date
it should output something like this:
<input type="date" class="datepicker" ... />
回答2:
To provide another answer similar to cezar's answer, I did it this way below with my filter and template codes.
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 %}
回答3:
type="date" can help you without any widget (depends of browser):
class AvailFilter(django_filters.FilterSet):
row_date = django_filters.DateFilter(widget=DateInput(attrs={'type': 'date'}))
also if you need date range filter, you can use DateFromToRangeFilter instead of DateFilter
来源:https://stackoverflow.com/questions/49054846/how-can-i-use-date-picker-with-django-filter