Django DateTimeField无法被JS访问，倒计时显示NaN问题

问题描述 #

在Django项目中尝试通过Model的DateTimeField传递结束时间，实现前端动态倒计时，但前端未获取到有效时间，反而显示NaNd "NaNh NaNm NaNs"。

现有代码 #

Model #

class Event(models.Model):
    end_datetime = models.DateTimeField()

View #

def event_detail(request, event_id):
    event = Event.objects.get(pk=event_id)
    current_datetime = timezone.now()
    return render(
        request,
        "nysc_landing.html",
        {"event": event, "current_datetime": current_datetime},
    )

HTML #

<div id="countdown"></div>

JavaScript #

<script>
    // Function to update the countdown timer
    function updateCountdown(endTime) {
        var now = new Date();
        var distance = new Date(endTime) - now;

        // Calculating remaining time
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Displaying the countdown timer
        document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

        // If the countdown is over, display a message
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById("countdown").innerHTML = "EXPIRED";
        }
    }

    // Fetching the end datetime from backend
    var endTime = "{{ event.end_datetime }}";

    // Update the countdown timer every second
    var timer = setInterval(function () {
        updateCountdown(endTime);
    }, 1000);
</script>

问题原因 #

{{ event.end_datetime }}在模板中输出的是Django默认的日期时间格式（比如Oct 5, 2024, 12:00 PM），这种格式无法被JavaScript的new Date()正确解析，导致distance计算结果为NaN，最终显示出NaNd等错误内容。

解决方案 #

核心是将Django的DateTimeField转换为JavaScript能识别的ISO 8601标准格式（如2024-10-05T12:00:00+08:00），有两种实现方式：

方式一：在View中转换格式 #

修改View代码，将结束时间转为ISO 8601格式后传递给模板：

def event_detail(request, event_id):
    event = Event.objects.get(pk=event_id)
    current_datetime = timezone.now()
    # 将DateTime转换为ISO 8601格式
    event_end_iso = event.end_datetime.isoformat()
    return render(
        request,
        "nysc_landing.html",
        {"event": event, "current_datetime": current_datetime, "event_end_iso": event_end_iso},
    )

然后在JavaScript中使用转换后的值：

var endTime = "{{ event_end_iso }}";

方式二：直接在模板中使用过滤器 #

无需修改View，直接用Django内置的date过滤器输出ISO格式：

var endTime = "{{ event.end_datetime|date:'c' }}";

其中'c'是Django的日期格式符，对应ISO 8601标准格式。

额外注意事项 #

• 如果项目开启了USE_TZ=True，ISO格式会包含时区信息，JavaScript的new Date()能自动处理时区转换，确保倒计时准确。
• 可以在浏览器控制台打印endTime的值，确认输出的是标准ISO格式，排查是否存在格式问题。

内容的提问来源于stack exchange，提问作者IFEANYI STANLEY