How to convert time values inside jinja code to the browser's local timezone when the page loads? How to convert time values inside jinja code to the browser's local timezone when the page loads? flask flask

How to convert time values inside jinja code to the browser's local timezone when the page loads?


Unfortunately, Jinja2 is rendered on the server, so it's code doesn't ever run on the client's machine - it can't (easily) get hold of the timezone.
This means that Javascript is run after the Jinja2 template is rendered, so you can't use JS within jinja2 tags.

There are a few ways to get around this/solve your problem:

1) When the user first visits your site (or logs in, if that's possible), have some javascript set a timezone cookie. This can then be read serverside, and passed into the template - something like this:

# On the serverdef view_jobs_page(request, response):    import datetime    tz = datetime.timedelta(seconds = int(request.cookies["timezone"])) # Pass this into the Jinja2 render function    # ... Do stuff# In your templatelocal time: {{ job.finishtime + tz }}

It's hard to give a more detailed example without knowing the exact stack and code structure that you're using. This also has the downside of using datetime, which you didn't want.

2) Use javascript to apply the timedelta:

<!-- In the head --><script>// When the page loads - the Jinja template is already rendered nowwindow.onload = function() {  // Get all the elements with the given class, and map through them  document.querySelectorAll(".datetime_to_be_adjusted").forEach(function(el){    var utcTime = moment.utc(el.innerText);  // This is the time in UTC    utcTime.local();  // Switch to using the browser's local timezone    el.innerText = utcTime.format('MMMM Do YYYY, h:mm:ss a');  // Write the local time back to the element  });}</script>...{% for job in jobs %}    <a href=”{{ url_for(‘jobs/by_id’,job_id=job.job_id) }}" class="datetime_to_be_adjusted">        {{ job.finishtime }}    </a>{% endfor %}

This of course relies of momentJS being included in the page, and uses it's UTC parsing mechanis.