如何将自定义 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">

因此，您在那里选择两个日期，并在此基础上获得过滤的QuerySet。一切运作良好。

但是我想使用这个有用的日期范围选择器： 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都将在表单中直观地隐藏。不过，这似乎很笨拙。

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

Answer 1

根据此示例，您可以像这样完成所需的操作：

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