How to format timestamps in the AnQi CMS template to display them in a friendly date/time format?

How to present the timestamp data stored in the background in a user-friendly and easy-to-read date or time format is a key link in improving user experience. Anqi CMS understands this well and provides a concise and efficient tag for template developers——stampToDateMake this process easy.

Understanding the timestamp in Anqicms

In many content models of AnQi CMS, such as articles, products, or categories, time data is usually stored in the form of a 10-digit timestamp. For example, the creation time of an article (CreatedTimeAnd update time(UpdatedTimeThis is the timestamp format. Although it is convenient for database storage and calculation, it looks rigid and hard to understand when displayed directly to the user.We need to convert it to a common format such as 'Year-Month-Day Hour:Minute:Second'.

Core tool:stampToDateTag parsing

The template engine of Anqi CMS supports syntax similar to Django, wherestampToDateTags are designed to solve the problem of timestamp formatting. Their usage is very intuitive:

{{stampToDate(时间戳字段, "格式化字符串")}}

There are two key parts:

1. Timestamp field: This is usually fromarchive/itemdata obtained from the object, for example, a 10-digit timestampitem.CreatedTime.
2. formatted stringThis is the core that determines the style of time and date display. The Anqi CMS template engine adopts the Go language (GoLang) time formatting standard.

Go language date formatting rules

The Go language date formatting rules are different from those commonly used in PHP, Python, and other languagesY-m-d H:i:sThe placeholders are different. It uses aFixed reference timeDefine the format, this reference time is:

2006年01月02日 15时04分05秒 -0700 MST

You need to replace each part of this reference time with the actual date and time elements you want to display. For example:

• 2006Represents the year (four digits)
• 01Represents the month (two digits)
• 02Represents the date (two digits)
• 15Represent hour (24-hour format, two digits)
• 04Represent minutes (two digits)
• 05Represents seconds (two digits)
• If you want to display hours in 12-hour format, you can use03.
• If you want to display the day of the week, you can useMon(Abbreviation) orMonday(Full name).

Understanding this reference time is the key to mastering Go language time formatting.

Common Formatting Examples

After mastering the formatting rules of Go language, we can easily implement various common date and time display requirements:

• Display only year-month-day:

  <div>{{stampToDate(item.CreatedTime, "2006-01-02")}}</div>
  {# 例如：2023-10-27 #}
  

• Display date and time in Chinese format:

  <div>{{stampToDate(item.CreatedTime, "2006年01月02日")}}</div>
  {# 例如：2023年10月27日 #}
  

• Show full date and time (24-hour format):

  <div>{{stampToDate(item.CreatedTime, "2006-01-02 15:04:05")}}</div>
  {# 例如：2023-10-27 10:30:45 #}
  

• Show full date and time (12-hour format with AM/PM):

  <div>{{stampToDate(item.CreatedTime, "2006-01-02 03:04:05 PM")}}</div>
  {# 例如：2023-10-27 10:30:45 AM #}
  

• Show only time:minute:

  <div>{{stampToDate(item.CreatedTime, "15:04")}}</div>
  {# 例如：10:30 #}
  

• Show weekday:

  <div>{{stampToDate(item.CreatedTime, "Mon")}}</div> {# 星期五 #}
  <div>{{stampToDate(item.CreatedTime, "Monday")}}</div> {# 星期五 #}
  

In actual use in the template

Generally, you would use it when traversing a document list or displaying document detailsstampToDatetags. For example, when displaying a list of articles, you may need to show the publication date of each article:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006年01月02日 15:04")}}</span>
                <span>浏览量：{{item.Views}}</span>
            </div>
        </a>
    </li>
    {% empty %}
    <li>暂无内容</li>
    {% endfor %}
{% endarchiveList %}

Or display the update time of the article on the article detail page:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div>
        <span>更新于：{% archiveDetail archiveUpdatedTime with name="UpdatedTime" %}{{stampToDate(archiveUpdatedTime, "2006-01-02 15:04")}}</span>
    </div>
    <div>
        {% archiveDetail archiveContent with name="Content" %}
        {{archiveContent|safe}}
    </div>
</article>

As you can see,stampToDateLabels make timestamp formatting very flexible and powerful, just by adjusting the formatting string, it can meet almost all date and time display needs.

Use suggestions and precautions

• Remember the Go language formatting standard.This is the core. Do not confuse with the Go language.2006-01-02 15:04:05Refer to the placeholder of time in other languages. Once mastered, you can apply it by analogy.
• The input value must be a timestamp:stampToDateTags are used specifically to handle integer timestamps that are 10 digits or more. If your variable is alreadytime.Timeof the Go language time object type, then you should usedateFilter (such as{{ myTimeVar|date:"2006-01-02" }}But usually, it is directly operated in the templatetime.TimeThere are fewer cases with objects, and Anqi CMS usually provides time as a timestamp
• Verify the display effectAfter modifying the template, be sure to refresh the page and check if the date and time are displayed in the expected format.

BystampToDateThis powerful tag, Anqi CMS provides great convenience for developers, making the display of time and date no longer a problem, just a few steps can turn the cold timestamp into user-friendly information in front of users.

Frequently Asked Questions (FAQ)

Q1: Why does my date formatting always show "2006-01-02", instead of the actual date?A1: This is because you may have misunderstood the time formatting rules of the Go language. InstampToDateTagged,"2006-01-02"It is not a placeholder, but a fixed reference date.You need to write the style of the actual date element you want to display, comparing it to this reference date.For example, if you want to display 'Year-Month-Day', write"2006-01-02"; If you want to display "day/month/year", write"02/01/2006".

Q2: I have a variable that istime.TimeType (or similar date object) can be usedstampToDateCan I format it?A2:stampToDateThe tag is used specifically for formattingInteger timestampof. If your variable is already processed on the backendtime.TimeOr other date objects, you should try using the built-in template engine'sdateA filter (if available) or other formatting method suitable for the data type. In the Anq CMS template, most of the time data is provided directly in timestamp form, thereforestampToDateIt is usually preferred.

Q3: If I only need to display the year, month, or a specific part of the date, how do I write the formatted string?A3: You can refer to the reference time in the Go language.2006年01月02日 15时04分05秒Select only the parts you need.

• Only show the year:{{stampToDate(item.CreatedTime, "2006")}}
• Show only the month:{{stampToDate(item.CreatedTime, "01")}}Or (will display as '10'){{stampToDate(item.CreatedTime, "Jan")}}Or (will display as 'Oct')
• Show only hours and minutes:{{stampToDate(item.CreatedTime, "15:04")}}