如何将自定义 DateRangePicker 小部件与 Django 过滤器的 DateFromToRangeFilter 一起使用

Question

所以我有这个过滤器使用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"] 的漂亮小部件。

也许一个解决方案是在 GET 请求之后使用 JavaScript 处理它。然后该函数将获取开始日期并将其注入id_assignment_date_0 字段。并将结束日期注入id_assignment_date_1 字段。 id_assignment_date_0 和 id_assignment_date_1 字段都将在视觉上隐藏然后在表单中。不过，这似乎很hacky。

有人对此有聪明的解决方案吗？

Answer 1

根据this example，你可以这样完成你想要的：

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