Question

I’m trying to get a countup timer against some timed entries in my app using this jQuery plugin, but it seems the implementation I have works on only Opera…all other browsers give me NaN:NaN:NaN where the timer should be.

I’ve used this code:

{% for entry in today %}
<tr>
    <td>{{ entry.description }}</td>
    <td>{{ entry.start_time|date:"d M Y h:i a" }}</td>
    <td> 
        {% if entry.end_time %}
        {{ entry.end_time|date:"d M Y h:i a" }}
        {% else %}
            <a href="{% url updateEntry entry.id %}">In Progress</a>
        {% endif %}
    </td>
    <td> 
        {% if entry.end_time %}
           {{ entry.hours }}
        {% else %}
       <script type="text/javascript">
        $(function() {  
                   var startTime = new Date("{{ entry.start_time }}");
                   $('#sinceStart').countdown({since: startTime, compact: true,
                      format: 'HMS', description: ''});
                }); 
            </script>
        <div id="sinceStart" class="countdown"></div>
        {% endif %}
    </td>
</tr>

{% endfor %}

The variable for start_time is set using the now() function. One thing I noticed however was that before, the timer wasn’t working on Opera too…then I modified the code to have now().replace(microsecond = 0) and it worked for the one browser.

Does anyone have a solution for having the script working on the other browsers?

Answer 1

After a bit of researching I managed to figure it out…turns out customizing the display format of my datetime fields worked out

In case anyone else has the same problem in future, I followed the steps here to enable localization, then in the formats.py file, I had this: DATETIME_FORMAT = ('F d, Y H:i:s')