时间戳

首页 > 解决方案 > 如何编写将计算日期并更改表格颜色的JS？

javascript - 如何编写将计算日期并更改表格颜色的JS？

问题描述

我正在尝试创建一些 JavaScript 来计算 2 个输入日期之间的差异。如果结果小于 24 小时，表格行需要着色为红色。

我将在下面给出一些代码；

class Campaigns(models.Model):

   start_date = models.DateField(auto_now=False, auto_now_add=False, verbose_name="Starting Date")
   end_date = models.DateField(auto_now=False, auto_now_add=False, verbose_name="Ending Date")
   broadcast = models.CharField(choices=BROADCAST_STATUS, blank=False, verbose_name="Broadcast Situtation", max_length=10)

这是我的表格行：

{% for campaign in campaigns %}
   <tr>
     <td class="text-center">{{ campaign.agency }}</td>
     <td class="text-center">{{ campaign.brand }}</td>
     <td class="text-center">{{ campaign.channel }}</td>
     <td class="text-center">{{ campaign.target_group }}</td>
     <td class="text-center">{{ campaign.start_date }}</td>
     <td class="text-center">{{ campaign.end_date }}</td>
     <td class="text-center">{{ campaign.date_to_take_place }}</td>
     <td class="text-center">{{ campaign.day_part }}</td>
     <td class="text-center">{{ campaign.impression }}</td>
     <td class="text-center">{{ campaign.broadcast }}</td>
   </tr>
{% endfor %}

所以我需要计算的是，

result = campaign.start_date - campaign.end_date
if result < 24 hours:
    set table row color to red.

感谢您提供任何提示/解决方案！

标签： javascriptpythonhtmlcssdjango

解决方案

如我所见，您不需要 JavaScript，因为我在您的代码中看不到任何输入。如果开始日期和结束日期之间的差异低于 24 小时，您只需要简单的属性即可返回 True/False。

class Campaigns(models.Model):

    start_date = models.DateField(auto_now=False, auto_now_add=False, verbose_name="Starting Date")
    end_date = models.DateField(auto_now=False, auto_now_add=False, verbose_name="Ending Date")
    broadcast = models.CharField(choices=BROADCAST_STATUS, blank=False, verbose_name="Broadcast Situtation", max_length=10)

    @property
    def below_24h(self):
        # check self.end_date - self.start_date here
        # and return True/False

现在在模板中：

{% for campaign in campaigns %}
{% if campaign.below_24h %}
   <tr style="color: red">
{% else %}
   <tr>
{% endif %}
     <td class="text-center">{{ campaign.agency }}</td>
     <td class="text-center">{{ campaign.brand }}</td>
     <td class="text-center">{{ campaign.channel }}</td>
     <td class="text-center">{{ campaign.target_group }}</td>
     <td class="text-center">{{ campaign.start_date }}</td>
     <td class="text-center">{{ campaign.end_date }}</td>
     <td class="text-center">{{ campaign.date_to_take_place }}</td>
     <td class="text-center">{{ campaign.day_part }}</td>
     <td class="text-center">{{ campaign.impression }}</td>
     <td class="text-center">{{ campaign.broadcast }}</td>
   </tr>
{% endfor %}

推荐阅读