Как использовать пользовательский виджет DateRangePicker с Django Фильтром DateFromToRangeFilter - PullRequest
Новая
       5

Как использовать пользовательский виджет DateRangePicker с Django Фильтром DateFromToRangeFilter

3 голосов
/ 15 февраля 2020

Итак, у меня есть этот фильтр, использующий Django Filter: 

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

Этот встроенный класс Django Фильтр генерирует форму с этими двумя входами: 

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

Так что вы выбираете две даты и на основании этого получаете отфильтрованный QuerySet. Все работает хорошо.

Однако я хотел бы использовать этот полезный DateRangePicker: https://www.daterangepicker.com/

Это активируется так: 

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

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

Однако, как вы можете видеть, это только одно поле, в котором будет установлен диапазон между датами. Но Django Filter работает с начальным полем ввода и конечным полем ввода.

Как я могу изменить это, чтобы я мог использовать красивый виджет, который принадлежит input[name="dates"].

Возможно, решение состоит в том, чтобы обработать его с JavaScript после запроса GET. Затем функция возьмет дату начала и вставит ее в поле id_assignment_date_0. И возьмите дату окончания и введите ее в поле id_assignment_date_1. Оба поля id_assignment_date_0 и id_assignment_date_1 будут визуально скрыты в форме. Это выглядит довольно глупо.

У кого-нибудь есть умное решение для этого?

1 Ответ

4 голосов
/ 18 февраля 2020

Согласно этому примеру , вы можете выполнить sh, что вы хотите, вот так: 

<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>

Хотя формат может отличаться от того, что вам нужно. Вы также можете изменить формат следующим образом: 

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