How to use custom DateRangePicker widget with Django Filter's DateFromToRangeFilter

Question

So I have this filter using Django Filter:

class AssignmentFilter(FilterSet):
    assignment_date = filters.DateFromToRangeFilter()

This built in class of Django Filter generates a form with these two inputs:

<input type="text" name="assignment_date_after" id="id_assignment_date_0">
<input type="text" name="assignment_date_before" id="id_assignment_date_1">

So there you pick the two dates and based on that it will get you the filtered QuerySet. All working well.

However I would like to use this usefull DateRangePicker: https://www.daterangepicker.com/

This gets activated like this:

<input type="text" name="dates" class="form-control">

<script>
$('input[name="dates"]').daterangepicker();
</script>

However as you can see, this is only one field where the range between the dates will be set. But Django Filter works with an start input field and end input field.

How can I modify this so that I can use the nice widget that belongs to input[name="dates"].

Maybe a solution is to process it with JavaScript after a GET request. The function will then take the start date and inject it into the id_assignment_date_0 field. And take the end date and inject it to the id_assignment_date_1 field. Both the field id_assignment_date_0 and id_assignment_date_1 will be visually hidden then in the form. It seems quite hacky though.

Does anyone have a clever solution for this?

score 3 · Accepted Answer · edited Feb 18 '20 at 10:28

3

According to this example, you can accomplish what you want like this:

<input type="text" id="datePicker" name="dates" class="form-control">
<input type="hidden" name="assignment_date_after" id="id_assignment_date_0">
<input type="hidden" name="assignment_date_before" id="id_assignment_date_1">

<script>
$(function() {
  $('input[name="dates"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    $('#id_assignment_date_0').val(start)
    $('#id_assignment_date_1').val(end)
  });
  $('#datePicker').removeAttr('name');
});
</script>

Although, the format might differ from what you need. You can also change the format with something like below:

$('#id_assignment_date_0').val(start.format('YYYY-MM-DD'))

edited Feb 18 '20 at 10:28

Raf Rasenberg

534
2
14
27

answered Feb 18 '20 at 08:14

nima

1,645
9
18

This does not work. The parameters get very weird. Based on your anwser I get this url ending: `domain.com/somepage?dates=02%2F18%2F2020+-+02%2F20%2F2020&assignment_date_after=18%2F02%2F2020&assignment_date_before=18%2F02%2F2020` – Raf Rasenberg Feb 18 '20 at 09:36
The url I need to make the filter work: `domain.com/somepage?assignment_date_after=18%2F02%2F2020&assignment_date_before=20%2F02%2F2020` – Raf Rasenberg Feb 18 '20 at 09:37
I have edited the answer to disable sending `dates` parameter in your `GET` request. – nima Feb 18 '20 at 09:38
You can just ignore the `dates` parameter in your backend and just use the parameters that you want. – nima Feb 18 '20 at 09:40
When I use disabled I can not select any dates. The datepicker won't open then – Raf Rasenberg Feb 18 '20 at 09:40
Yes, that's not proper. Why not just ignore the `dates` parameter in your backend? – nima Feb 18 '20 at 09:41
You can also use this *hack* mentioned in this thread. https://stackoverflow.com/a/43638170/3037529 – nima Feb 18 '20 at 09:42
Even if I ignore those parameters it still wouldn't work. Because look at my first comment. I used date range: `18-02-2020 - 20-02-2020` but for the `#id_assignment_date_0` and `#id_assignment_date_1` they both end up as 18-02-2020 as parameter. So it does not work – Raf Rasenberg Feb 18 '20 at 09:52
That's weird! Can you `console.log` both `start` and `end`? Do they look fine when you print them? – nima Feb 18 '20 at 09:56
1

It's working now! I updated your answer. It was 99% correct, just add this line: `$('#datePicker').removeAttr('name');` found it in this post: https://stackoverflow.com/a/20877611/10938976 – Raf Rasenberg Feb 18 '20 at 10:29

How to use custom DateRangePicker widget with Django Filter's DateFromToRangeFilter

1 Answers1