How to format a timestamp with the `stampToDate` tag to display the date and time in a user-friendly manner?

In the daily content operation of AnQi CMS, we often need to display the original timestamp data such as publication time and update time in a way that is more accustomed and easier to read for users. For example, the original timestamp is1609470335Such a pure numeric sequence has no meaning to ordinary users. To solve this problem, AnQi CMS provides a very practical template tag -stampToDateIt can help us convert these numeric timestamps into a clear and user-friendly date and time display.

stampToDate: Making timestamps readable

stampToDateThe core function of the tag is to beautify the output of a 10-digit or 13-digit (if internally processed as milliseconds) Unix timestamp according to the specified format.This greatly enhances the professionalism and user experience of the website content.Imagine if the posting time of the article only showed a string of numbers, the user might feel confused.And if it is displayed as “October 27, 2023, 10:30 AM” or “10/27/2023”, it is clear at a glance.

Its use is very intuitive:{{stampToDate(时间戳, "格式")}}. Here, you need to provide two parameters:

1. Timestamp:It is usually in AnQiCMSCreatedTime/UpdatedTimeThis field returns the number.
2. Format:This part is the template defining how you want the date and time to be displayed.

Understand the formatting rules: Special "magic numbers" in Go language

Of Security CMSstampToDateLabels follow the unique time formatting rules of Go language. Unlike what we might be familiar withYYYY-MM-DD/HH:MM:SSDifferent placeholder, Go language uses a fixed reference time——2006年01月02日 15时04分05秒(also known as "magic number" or "reference time") as a template.

The key to understanding this reference time is that each number or part represents a specific component of time:

• 2006Represents the year (Year)
• 01Representing the month (Month), with a leading zero
• 02Representing the date (Day), with a leading zero
• 15Representing the hour (Hour), 24-hour format, with a leading zero
• 04represent minutes (Minute), with leading zero
• 05represent seconds (Second), with leading zero

If you want to display other formats, just use the corresponding parts of these 'magic numbers' to construct your format string. For example, if you want to display 'year-month-date', the format string is"2006-01-02".

Common Formatting Examples

Below are some common formatting methods, as well as their corresponding format strings and display effects:

• Only show the date (Year-Month-Day): {{stampToDate(item.CreatedTime, "2006-01-02")}}For example:2023-10-27

• Display the full date and time: {{stampToDate(item.UpdatedTime, "2006-01-02 15:04:05")}}For example:2023-10-27 10:30:00

• Chinese date and time format: {{stampToDate(archive.CreatedTime, "2006年01月02日 15时04分")}}For example:2023年10月27日 10时30分

• Custom delimiter date: {{stampToDate(item.CreatedTime, "2006/01/02")}}For example:2023/10/27

• Show hours and minutes only: {{stampToDate(item.CreatedTime, "15:04")}}For example:10:30

• Show weekday (in English): {{stampToDate(item.CreatedTime, "Mon Jan 02 2006")}}For example:Fri Oct 27 2023(here is theMonRepresents the week,JanRepresents the English abbreviation for the month,02Is the date)

Actual application in template

In the Anqi CMS template, we usually loop through the document list (for examplearchiveList) or display document details (for examplearchiveDetailUsed whenstampToDate.

For example, on an article list page, you might display the publication time of each article like this:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-card">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p class="meta-info">
            发布于：{{ stampToDate(item.CreatedTime, "2006年01月02日 15:04") }}
            浏览量：{{item.Views}}
        </p>
        <p>{{item.Description}}</p>
    </div>
    {% endfor %}
{% endarchiveList %}

And on an article detail page, the update time can be displayed like this:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="article-meta">
        发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04:05") }}
        更新时间：{{ stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05") }}
        浏览量：{% archiveDetail with name="Views" %}
    </div>
    <div class="article-content">
        {% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}
    </div>
</article>

By reasonable applicationstampToDateTags and formatting rules ensure that time information on the website is always presented in a clear, professional, and user-friendly manner, thereby enhancing the overall user experience.

Frequently Asked Questions (FAQ)

1. Why can't I useYYYY-MM-DDthis format placeholder?Of Security CMSstampToDateThe tag uses the time formatting standard of the Go language, it does not recognizeY/M/DUse traditional placeholders. On the contrary, you need to use a fixed reference time (2006年01月02日 15时04分05秒) to construct your format string. For example, if you want to display a four-digit year, use2006; Use to display two-digit months,01and so on.