时间戳

首页 > 解决方案 > 如何将自定义 DateRangePicker 小部件与 Django 过滤器的 DateFromToRangeFilter 一起使用

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

问题描述

所以我有这个过滤器使用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。一切运作良好。

但是我想使用这个有用的 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。

有没有人有一个聪明的解决方案？

标签： javascriptjquerydjangodjango-filter

解决方案

根据这个例子，你可以像这样完成你想要的：

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

推荐阅读