我无法在我的模板中使用 daterangepicker 来过滤日期范围答案

【问题标题】：i am unable to use daterangepicker to my template for filter date-range我无法在我的模板中使用 daterangepicker 来过滤日期范围
【发布时间】：2019-11-29 01:35:41
【问题描述】：

模型.py

class Expenses(models.Model):
    reg_date = models.DateField(auto_now_add=True)
    exp_id = models.AutoField(primary_key=True)  # F
    description = models.CharField(max_length=200)
    expenses_value = models.IntegerField()


    def __str__(self):
        return str(self.exp_id)

forms.py

class Expensesform(forms.ModelForm):
    description = forms.CharField(widget=forms.Textarea(attrs={"rows":3, "cols":40,'class':'form-control','placeholder':'Enter Detail here...'}),required=True)
    expenses_value = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control','placeholder':'Enter Amount here...'}),required=True)

    class Meta:
        model  = Expenses
        fields = ("description", "expenses_value")

我使用了运行良好的代码库日期。但我无法为服装日期范围结果使用日期范围选择器输入。意味着用户可以使用日期范围选择器来计算此类日期范围的费用

views.py

def DailyExpReport(request):
    tday = datetime.date.today()
    datepicker1 = datetime.datetime.strptime('01072019', "%m%d%Y").date()

    total = 0
    myexpenses = Expenses.objects.filter(reg_date__gte = start_Date, reg_date__lte=tday)

    today_entry = Expenses.objects.filter(reg_date__gte = start_Date, reg_date__lte=tday).aggregate( Sum('expenses_value'))
    return render (request, "blog/expenses_report.html",{'Expenses':myexpenses, 'total': today_entry})

这是我的模板，适用于每日报告或特定编码日期

<!DOCTYPE html>
{% extends "blog/base.html"%}
{% block body_block %}
<h1>Expenses Detail:</h1>
<br>
<div class="container">
  <table class = "table"table table-striped table-bordered table-sm>
    <thead calss= "thead-dark">
      <tr>
        <th>Date</th>
        <th>ID</th>
        <th>Description</th>
        <th>Expences Value</th>
        </tr>
    </thead>
    <tbody>
      {% for object in Expenses %}
      <tr>
      <td>{{object.reg_date }}</td>
      <td>{{object.exp_id }}</td>
      <td>{{object.description}}</td>
      <td>{{object.expenses_value}}</td>
      <td>
      <a href="/editexpenses/{{object.exp_id}}"><span calss = "glyphicon glyphicon-pencil">Edit</span> </a>
      <a href="/deleteexpenses/{{object.exp_id}}" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>
      </td>
      </tr>
      {% endfor%}
    </tbody>
</table>
<br>
<br>
<a href="/dailyexpensesreport" class="btn btn-dark">Daily Report</a>
<a href="/monthlyexpensesreport" class="btn btn-dark">Monthly Report</a>
</div>
<br>
<br>
 <h3> Total Expenses are:  {{total.expenses_value__sum}}</h3>
{% endblock %}

【问题讨论】：

您是否收到任何要分享的错误信息？
您的“reg_date”字段有auto_now_add=True，这意味着该字段不可编辑。 Django 将始终将此字段设置为对象的创建日期
@IainShelvington“我不想编辑日期字段，我只想过滤特定日期范围的数据，用户可以通过日期范围选择器选择的日期以及这些日期的总费用”
@FarhaniWalid 我已经厌倦了这些方法来添加 datepicker "stackoverflow.com/questions/49054846/..." 但这些都不适合我
你的日期范围输入在哪里？

标签： jquery django python-3.x daterangepicker

【解决方案1】：

你需要这两个库

https://momentjs.com/
http://www.daterangepicker.com/

在你的 template.html 中你可以添加这个

<button type="button" class="btn daterange" data-toggle="tooltip" 

title="Choose a date range"><i class="fa fa-calendar"></i>
</button>

我用过ajax，但是你可以使用django的简单表单验证器

  $(function () {
  $('.daterange').click(function(){
  })

  $('.daterange').daterangepicker({
    ranges   : {
      'Today'       : [moment(), moment()],
      'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month'  : [moment().startOf('month'), moment().endOf('month')],
      'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: moment().subtract(29, 'days'),
    endDate  : moment()
  }, function (start, end) {

var startday = {'startDate': start.format('YYYY-MM-DD') }
var endday = {'endday': end.format('YYYY-MM-DD')}
var rangedatepush = [];
    rangedatepush.push(
        {
            startday: startday,
            endday: endday
        });
var rangedate = {'rangedate': rangedatepush}

$.ajax({
    type: 'POST',
    url: '/depart_data/',
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(rangedate),
    beforeSend: function() {
    $('#departvisit').addClass('load')
    $("#departvisit").find("svg").css({'opacity': '0.3', 'pointer-events':'none' });
    },    
    success: function(data) {
      $('#departvisit').removeClass('load')
      $('#department-chart').html(data)
    }
});    


  });

});

在你的views.py中处理我使用这个的请求：

@csrf_exempt
def DepartChart(request):
    if request.method == 'POST':
        params = json.loads(request.body)
        report_array = params['rangedate']
        for i in report_array:
            startdate   = i['startday']['startDate']
            EndDate     = i['endday']['endday']
            department_count =  Login_chart.objects.filter(date__gte=startdate, date__lte=EndDate).values('department').annotate(total_login=Sum('login_count')).order_by('department')
            context = {
            'department_count' : department_count
            }
            return render(request, 'troubleshootingapplication/admin_dash/departement_chart.html', context)
    else:
        return HttpResponse('')

希望对你有所帮助

【讨论】：

感谢分享，但我尝试了你的方法但失败了，得到“视图 blog.views.DateinputForm 没有返回 HttpResponse 对象。它返回了 None。”错误。
我在视图末尾添加了 else: 语句，试试看。

【解决方案2】：

我尝试过 ajax 或 js 方法但失败了。我只是在 html 中使用了两次简单的输入类型日期字段（开始日期和结束日期），并使用视图功能中的输入进行过滤。

我的观点.py

def datepicker(request):
    if request.method == 'GET':
        return render(request, 'blog/datepicker.html')

    elif request.method == 'POST':
          start_date = request.POST.get("startdate","")
          end_date = request.POST.get("enddate","")
          total = 0
          myexpenses = Expenses.objects.filter(reg_date__gte = start_date, reg_date__lte=end_date)
          today_entry = Expenses.objects.filter(reg_date__gte = start_date, reg_date__lte=end_date).aggregate( Sum('expenses_value'))
          return render(request, 'blog/datepicker.html', {'Expenses':myexpenses, 'total': today_entry})
    else:
        return render(request, 'blog/dailyexpensesreport')

我的html代码

  <div class="container">
      <form method="POST" action="#">
        {% csrf_token %}
        <label for="">Start Date</label>
        <input type="date" name="startdate">
        <label for="">End Date</label>
        <input type="date" name="enddate">

        <button type="submit">Submit</button>
      </form>
    </div>

【讨论】：