javascript - 如何将自定义 DateRangePicker 小部件与 Django Filter 的 DateFromToRangeFilter 一起使用

Question

所以我使用 Django Filter 这个过滤器:

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

这个内置的 Django Filter 类生成一个包含这两个输入的表单:

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

因此，您可以选择两个日期，并根据该日期为您提供过滤后的查询集。一切正常。

但是我想使用这个有用的 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 对其进行处理。然后，该函数将获取开始日期并将其注入(inject)到 id_assignment_date_0 字段中。获取结束日期并将其注入(inject)到 id_assignment_date_1 字段中。字段 id_assignment_date_0 和 id_assignment_date_1 都将在表单中以视觉方式隐藏。不过看起来很老套。

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

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