Formatting Date, Time, and Numbers in Django Templating.

Hi there, Welcome to this new article where I will be explaining how to format template values such as date, time, and numbers inside the Django HTML templates.

I will be assuming you are able to initiate a Django project and get it running. If not I will be writing an introductory article on the same or you can go through the documentation here.

It’s actually very simple to get it working. So we will start with formatting the date then the time and finally the numbers.

1. Formatting Dates

Our case scenario is we have saved a date value “Mar 06, 2021” in our database and we are listing the date value to the user through the templates and in this case the index.html file.

We will put the value on a p tag as shown

<p>This is the date value: {{ date }}</p>

the code above will have an output of “This is the date value: Mar 06, 2021”, which is in the format month date, year.

Now I would like to have my date in the format Y-m-d. To achieve this on my template without modifying my models and views.py files, I will write my code as below.

<p>This is the date value: {{ date|date:"Y-m-d"}}</p>

the code above will have a new output

This is the date value: 2021-03-06

which is now our Y-m-d format. It’s that simple.

1. Formatting Time

Our second case scenario is we have saved a time value “12:01:00 pm” in our database and we are listing the time value to the user through the templates and we will still use the index.html file.

We will put the value on a span tag as shown

<span>Our time value: {{ time }}</span>

the code above will have an output of “Our time value: 12:01:00 pm”, which is in the format Hour: Minutes: Seconds.

Now I would like to have my time in the format H: i. To achieve this on my template without modifying my models and views.py files, I will write my code as below.

<span>Our time value: {{ time|date:"H:i"}}</span>

the code above will have a new output

Our time value: 12:01 pm

which is now our H: i format. It’s that simple.

1. Formatting Numbers

Let’s say we are dealing with numbers in the thousands or we are displaying currencies. To ensure easy readability for the users we will need to format it to include commas.

To achieve this we need to add ‘django.contrib.humanize’ in our settings.py file under the INSTALLED APPS section as shown below.

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'django.contrib.humanize',
]

This will add the humanize template filter to the templates which are useful when adding a human touch to the templates.

Next, we will then go to the template where we need to humanize the numbers and format them. On our template, numbers.html we have the numbers 1000,2223333,3432223, and 900 which are rendered by the number1,number2,number3,number4 variables respectively. Reading these numbers is painful if not well-formatted.

We will display these numbers on p tags and format them. To achieve this we need to add the following line on the HTML file to load the humanize filter.

{% load humanize %}

Then where we are loading the numbers we will add the |intcomma pipe as shown below on each output.

<p>{{ number1|intcomma }}</p>
<p>{{ number2|intcomma }}</p>
<p>{{ number3|intcomma }}</p>
<p>{{ number4|intcomma }}</p>

This will output the values will be:

1,000
2,223,333
3,432,223
900

That’s it, hope everything was clear and now you can be able to format your dates, time, and numbers in your Django project. If not, don’t hesitate to reach out.

Author: Collins Munene

Email: collinshillary1@gmail.com

Devligence Limited