I'm creating a sport app with Django. I need to display a list of matches with a countdown that goes to the exact hour of those matches.
Everything works find, except that the countdowns go to the day of the matches, not the hours and minutes. For example, if a match begin in 2 days at 9 pm, the countdown will stop at midnight the day of the match. So it won't go to 9pm.
Here is my code:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src=".6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.countdown.js"> </script>
</head>
<body>
<div style="float:left">
{% for match in matches %}
<div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y'}}"></div>
</div>
{% endfor %}
</div>
</br></br>
<script>
$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date = new Date(date_string);
self.countdown({until: date});
});
</script>
</body>
"real_start" is my DateTime I guess the problem is about the date format 'M j ,Y' that doesn't match a DateTimeField. But I didn't find how to fix it.
Any help would be wele. Thanks.
I'm creating a sport app with Django. I need to display a list of matches with a countdown that goes to the exact hour of those matches.
Everything works find, except that the countdowns go to the day of the matches, not the hours and minutes. For example, if a match begin in 2 days at 9 pm, the countdown will stop at midnight the day of the match. So it won't go to 9pm.
Here is my code:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"> </script>
</head>
<body>
<div style="float:left">
{% for match in matches %}
<div>
<p>{{ match }}</p>
<p> {{match.real_start}} <p>
<a href="{{ match.get_absolute_url_grille }}">Go</a>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y'}}"></div>
</div>
{% endfor %}
</div>
</br></br>
<script>
$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date = new Date(date_string);
self.countdown({until: date});
});
</script>
</body>
"real_start" is my DateTime I guess the problem is about the date format 'M j ,Y' that doesn't match a DateTimeField. But I didn't find how to fix it.
Any help would be wele. Thanks.
Share Improve this question asked Oct 16, 2012 at 13:45 JojoLJojoL 1411 silver badge8 bronze badges2 Answers
Reset to default 4The best solution in my opinion is to convert the you DateTimeField model attribute in the Python code to a timestamp, converted to milliseconds. Either do so by adding a method to your model which takes care of that logic, which is the easiest solution and then parse that string in javascript to get milliseconds or otherwise write a Django Filter but that's slightly more plicated.
import time
import datetime
def datetime_to_milliseconds(some_datetime_object):
timetuple = some_datetime_object.timetuple()
timestamp = time.mktime(timetuple)
return timestamp * 1000.0
## Example using this
now = datetime.datetime.now()
millisecond_timestamp_now = datetime_to_milliseconds(now)
(The code is verbose by choice, to make it easier for you to grasp the logic).
Your Javascript should then be something along the lines of:
$('.match_countdown').each(function() {
var self = $(this),
date_string = self.attr('data-date'),
date_milliseconds = Number(date_string);
date = new Date(date_milliseconds);
self.countdown({until: date});
});
Basically something along those lines should do the deal, just adapt it to a method.
A tip for the future, try to avoid putting a lot of logic in your templates, it's error prone and not really a good practice (unless it's rendering logic only, even then there's better solutions).
Good luck.
Since Django 1.2 you can do
date = new Date({{ value|date:"c" }});
Check format documentation here.