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

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。Raf Rasenberg想要引起更多关注对此问题。

所以我使用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" name="dates" class="form-control" disabled>
<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)
  });
});
</script>

尽管，格式可能与您需要的格式不同。您也可以使用以下方式更改格式：

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