How to ensure that the date and time are displayed correctly on the front end using the timestamp formatting tag?

In website content operations, the correct display of date and time information is crucial, as it not only affects the user's reading experience but also directly relates to the timeliness and accuracy of the information.AnQiCMS (AnQiCMS) understands this and provides a powerful and flexible timestamp formatting tag that allows developers and operators to easily convert the original timestamps stored on the backend to a front-end user-friendly date and time format.

Why do we need timestamp formatting?

We know that the data stored on the website backend, especially the publication time, update time, comment time, etc., usually exists in the form of a timestamp (Unix timestamp). For example, you might see a string of numbers1678886400Such numbers are efficient for computers, but they are meaningless for users visiting websites.Therefore, we need a mechanism to format these original timestamp data into various easily readable forms such as "March 15, 2023", "3 PM this afternoon", "3 hours ago", etc., according to the user's habits and the design requirements of the page.

The solution of Anqi CMS:stampToDateTag

An enterprise CMS provides a dedicated timestamp label formatstampToDate. This tag can accept a timestamp and a format string as parameters and output the corresponding date and time according to the defined format.

Its basic usage method is very concise and clear:{{stampToDate(时间戳, "格式")}}

The key is in two parts:

1. Timestamp (时间戳)This is usually a 10-digit or 13-digit number, representing the number of seconds or milliseconds elapsed since the Unix epoch (00:00:00 UTC on January 1, 1970). In AnQi CMS, for example, the article'sCreatedTimeorUpdatedTimecomments,CreatedTimeare all provided in this form.
2. format("格式")This is the string defining the date and time display style. The format string of Anqicms follows the Go language time formatting rules and is not traditional.YYYY-MM-DDSuch placeholders, instead, use a special 'reference time' to define the layout.

Understanding Go language time formatting reference time

The time formatting in Go language is quite unique, it uses a fixed reference time:2006年01月02日 15时04分05秒Corresponding to2006-01-02 15:04:05.000000000 -0700 MST)

You can replace the part you want to display with the corresponding number in this reference time. For example:

• If you want to displayYear, use2006.
• If you want to displayMonth, use01(with a leading zero) or1(without a leading zero).
• If you want to displayDate, use02(with a leading zero) or2(without a leading zero).
• If you want to displayhours, use15(24-hour format) or03(12-hour clock, must be paired withPM/AM)
• If you want to displayminute, use04.
• If you want to displayseconds, use05.

By combining these numbers, you can construct various complex date and time formats.

Common formatting examples:

• "2006-01-02": Display as2023-03-15
• "2006年01月02日": Display as2023年03月15日
• "15:04:05": Display as14:30:00
• "2006/01/02 15:04": Display as2023/03/15 14:30
• "Mon, 02 Jan 2006": Display asWed, 15 Mar 2023

Use case: Display the backend timestamp on the front end

In Anqi CMS template development, we often encounter scenarios where we need to display timestamps.For example, the publication and update time of the article detail page, the entry time in the article list, the time of each comment in the comment list, even the time of user registration or last login, and so on.

For example, with a list of articles, suppose we want to display the article title and its publication time, update time:

{% archiveList archives with type="list" limit="5" %}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
        <p>发布时间：{{ stampToDate(item.CreatedTime, "2006年01月02日 15:04") }}</p>
        <p>更新时间：{{ stampToDate(item.UpdatedTime, "2006/01/02") }}</p>
        <p class="description">{{ item.Description }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

In this code block:

• item.CreatedTimeanditem.UpdatedTimeIt is the original timestamp obtained from the backend.
• stampToDateThe label receives these timestamps.
• The firststampToDateUse"2006年01月02日 15:04"Format, convert the timestamp to a Chinese display of “year, month, day, hour, minute”.
• the secondstampToDateUse"2006/01/02"Format, convert the timestamp to a concise display of "Year/Month/Day".

In this way, even if the backend returns a string of numbers, the frontend can present it to the user in a clear and beautiful way according to the preset format.

Advanced tip: Distinguish between time types and labels

The Anqi CMS template engine also providesdateandtimeFilters, but please note that these filters are mainly used to process Go language intime.TimeType (representing an object for dates and times), not directly handling raw numeric timestamps. If you try to pass a numeric timestamp todateortimea filter, you are likely to encounter an error.

Therefore, when you clearly know that the data source is a "timestamp", you must usestampToDatea tag, which is born for this purpose."

If you need to displaythe current timeInstead of the specific event time stored in the database, Anqi CMS also provides{% now "格式" %}Tags. For example, to display the current year in the footer:{% now "2006" %}

Summary

BystampToDateLabel, you can easily convert the timestamp stored on the backend to a user-friendly date and time format, greatly enhancing the readability and user experience of the website content.Mastery of the reference time format of Go language will be the key to efficient template development in Anqi CMS.No matter whether you need to display time to the second or a concise date,stampToDateCan meet all your needs, ensure the correct display of date and time on the front end.

Frequently Asked Questions (FAQ)

1. Why do I use it directly in the template?{{ item.CreatedTime }}What I get is a string of numbers, not a date?This is becauseitem.CreatedTimeIn the backend database, it is usually stored in the form of a Unix timestamp (Timestamp), which represents the number of seconds from January 1, 1970 to the present.The browser cannot directly identify it as a readable date format.You need to use the secure CMS provided bystampToDateLabel it so that it can be correctly displayed as a date and time on the front end.

2. I tried to use{{ item.CreatedTime|date:'YYYY-MM-DD' }}filter, but the page reported an error, why is that?In the AnQi CMS template engine,dateThe filter is used to process Go languagetime.Timeobjects, rather than processing raw digital timestamp numbers directly. If you want to format the timestamp, you must usestampToDateLabel, and define the date format according to the reference time format of Go language (such as"2006-01-02"), rather than usingYYYY-MM-DDand other placeholders.

3. What tag should I use if I only need to display the current time instead of the content publish time?If you want to display the current date or time in the template instead of the timestamp of the specific content retrieved from the database, you can use{% now "格式" %}Tag. For example, {% now "2006年" %}It will display the current year. The format string also follows the time format rules of the Go language.