DEV Community

Nelson Figueroa
Nelson Figueroa

Posted on • Originally published at nelson.cloud on

How to Generate and Format the Current Date and Time in Hugo with dateFormat

#webdev #beginners #tutorial

Here are a bunch of Hugo snippets you can use to generate the current date and time in your Hugo site.

You can copy and paste these into HTML templates. If you want to use these within your posts/articles (Markdown files) you'll need to create a shortcode first. Scroll down to the Using Shortcodes section for more details.

I'm running Hugo v0.140.0+extended.

For all examples, I will assume the time is 2024-12-22 2:30PM PT.

Date Only 

{{ now | dateFormat "2006-01-02" }}
Enter fullscreen mode Exit fullscreen mode

Output:

2024-12-22
Enter fullscreen mode Exit fullscreen mode

Date and 12-Hour Time 

{{ now | dateFormat "2006-01-02 3:04" }}
Enter fullscreen mode Exit fullscreen mode

Output:

2024-12-22 2:30
Enter fullscreen mode Exit fullscreen mode

You can specify AM or PM by adding PM to the time. Go will output the correct one (AM/PM) based on the actual time:

{{ now | dateFormat "2006-01-02 3:04PM" }}
Enter fullscreen mode Exit fullscreen mode

Output:

2024-12-22 2:30PM
Enter fullscreen mode Exit fullscreen mode

Note: Always use PM (or pm) as the placeholder in the time string. Using AM in the time string will print the literal text AM as regardless of the actual time. For example:

{{ now | dateFormat "2006-01-02 3:04AM" }}


plaintext

Will output:

2024-12-22 2:30AM

Even if it's actually 2:30PM.

Date and 24-Hour Time

Essentially just changing 3:04 to 15:04.

{{ now | dateFormat "2006-01-02 15:04" }}
Enter fullscreen mode Exit fullscreen mode

Output:

2024-12-22 14:30
Enter fullscreen mode Exit fullscreen mode

Date and Time with Timezone 

{{ now | dateFormat "2006-01-02 15:04 PST" }}
Enter fullscreen mode Exit fullscreen mode

Output:

2024-12-22 14:30 PST
Enter fullscreen mode Exit fullscreen mode

It's possible to add just about anything in place of the timezone and it'll take it. You can even add text that isn't a valid timezone.

{{ now | dateFormat "2006-01-02 15:04 test" }}
Enter fullscreen mode Exit fullscreen mode

Output:

2024-12-22 14:30 test
Enter fullscreen mode Exit fullscreen mode

Date, Time, Timezone, and UTC Offset

There are two ways that I found of doing this.

The first way:

{{ now | dateFormat "2006-01-02 15:04 PST -0700" }}
Enter fullscreen mode Exit fullscreen mode

Output. Note how Hugo changed the offset from -0700 to -0800 in this case:

2024-12-22 14:30 PST -0800
Enter fullscreen mode Exit fullscreen mode

The second way:

{{ now | dateFormat "2006-01-02 15:04 PST UTC-0700" }}
Enter fullscreen mode Exit fullscreen mode

Output. Hugo once again changed the offset from UTC-0700 to UTC-0800:

2024-12-22 14:30 PST UTC-0800
Enter fullscreen mode Exit fullscreen mode

Timezones and CI/CD

These snippets work for your current timezone but if you use a CI/CD solution you may need to specify the timezone through an environment variable or etc. It depends on your CI/CD solution. I couldn't find a way to set the timezone in Hugo itself so I don't think it's possible.

Using Shortcodes

These snippets can be copied and pasted into .html templates. However, to use them in Markdown files, you'll need to create a separate file in layouts/shortcodes/ and then use that shortcode in a markdown file.

For example, I can create a file generate_date.html in layouts/shortcodes/ with the following contents:

{{ now | dateFormat "2006-01-02" }}
Enter fullscreen mode Exit fullscreen mode

Then I can reference this shortcode in a markdown file with this syntax:

{{</* generate_date */>}}
Enter fullscreen mode Exit fullscreen mode

An example along with some other markdown:

# A Header in Markdown

Some text in markdown

*The current date is*: {{</* generate_date */>}}
Enter fullscreen mode Exit fullscreen mode

References

Top comments (0)