时间戳

首页 > 解决方案 > 在 Django 中为 HTML 表启用日期选择器

django - 在 Django 中为 HTML 表启用日期选择器

问题描述

我在 Django 模板中有一个 HTML 表。该表由三列组成：开始日期、停止日期和两者之间的差异。我想在上面包含一个日期选择器，它允许我设置“从”和“到”日期并获取该特定时间段的总体记录。我怎样才能做到这一点？

模型.py：

class Startdate(models.Model):
    user_id= models.ForeignKey(User, on_delete = models.CASCADE)
    start_time = models.DateTimeField()

class Stopdate(models.Model):
    user_id= models.ForeignKey(User, on_delete = models.CASCADE)
    stop_time = models.DateTimeField()
    diff = models.DurationField(null = True, blank=True)

视图.py：

def interface(request):
    data = User.objects.filter(pk__gt=1) #All users apart from the SuperUser admin
    store_data = []
    for user in data:
        sta_time = Startdate.objects.filter(user_id = user)
        sta_data = sta_time.values_list('start_time', flat=True)

        sto_time = Stopdate.objects.filter(user_id = user)
        sto_data = sto_time.values_list('stop_time', flat=True)
        diff_data = sto_time.values_list('diff', flat = True)

        store_data.append((sta_data, sto_data, diff_data))
    return render(request, 'users/interface.html', {'data': store_data})

接口.html：

<table>
    <tr>

        <th> Start Time </th> 
        <th> Stop Time </th>
        <th> Difference </th>
    </tr>
        {% for column in data %}
        <tr>
            <td>{{column.0}}</td>
            <td>{{column.1}}</td>
            <td>{{column.2}}</td>
        </tr>
        {% endfor %}

 </table>

如何在上面的表格中包含日期选择器？另外，我如何实现设置从和到日期的功能并在所选时间段之间取回这些行？

标签： djangohtml-table

解决方案

尝试将其包含在您的主 html 中。

 <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <!-- XDSoft DateTimePicker -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script>

在 interface.html 中添加此代码，这也显示两个日期之间的不同日期

 <input  class="datetimepicker"  name="start_date" id="start_date" type="text">
  <input class="datetimepicker" name="end_date" id="end_date"  type="text" onchange="myFunction()">
  <div>
    <span id="FinalDateDiff"></span>
  </div>

  <script>
    $(function () {
      $(".datetimepicker").datetimepicker();
    });
    function myFunction() {
       var start = $('#start_date').val();
       var end = $('#end_date').val();
       console.log(start);
       console.log(end);
           var startDay = new Date(start);
           var endDay = new Date(end);
           var millisecondsPerDay = 1000 * 60 * 60 * 24;

           var millisBetween = endDay.getTime() - startDay.getTime();
           var days = millisBetween / millisecondsPerDay;
      $('#FinalDateDiff').html(days);
     }

  </script>

计算日期差异

var start = $('#start_date').val();
var end = $('#end_date').val();

var date_diff = new Date(end - start);

推荐阅读