In AnQiCMS template, easily format timestamps: Custom date and time display guide

In website operation, the content release time, update time, comment time, and other date information are an important part of the information we convey to visitors.很多时候，从数据库中获取到的时间数据通常是时间戳（一串数字），这对于用户来说并不直观。How to convert these original timestamps into a readable date and time format, and flexibly adjust the display style according to the page design, is a frequently encountered requirement in template development.

AnQiCMS provides very practical and flexible tools for the template to solve this problem, the core of which isstampToDateLabel.

KnowstampToDateTag: The magic wand of timestamp

stampToDateThe tag is a feature built into the AnQiCMS template engine, which is specifically used to convert numeric timestamps into the common date-time strings we are familiar with. Its usage is concise and clear:

{{stampToDate(时间戳, "格式")}}

The key here lies in two parts:

  1. Timestamp:This is usually a 10-digit number, representing the number of seconds elapsed since the Unix epoch (00:00:00 UTC on January 1, 1970). For example, in AnQiCMS's documentation, comments, user data, etc.item.CreatedTime(Creation time)、item.UpdatedTime(Update time) and other fields, the ones returned are all timestamps.

  2. Format:This is the key to how the date and time are displayed.AnQiCMS's template engine is based on Go language, and its time formatting method is very unique.Y-m-d H:i:sInstead of using such placeholders, use a fixed reference time 2006-01-02 15:04:05as a formatting template.

    Understanding this reference time is crucial:

    • Year:Use2006representing
    • Month:Use01(Representing January) indicates
    • Date:Use02(Representing February) indicates
    • Hour:Use15(24-hour system, representing 3 PM) indicates
    • Minutes:Use04(represents quarter) 表示
    • Seconds:Use05(represents five seconds) 表示
    • AM/PM:UsePMorAMrepresents (for example)3:04PM)
    • Weekday:UseMon(abbreviation for Monday) OrMonday(Monday full name) Indicates

    When you want a certain date-time format, just use the corresponding number or letter in the reference time to “spell” out the format you want.

实际应用场景：AnQiCMS 数据中的时间戳

In AnQiCMS templates, you will often encounter situations where you need to format timestamps. Below, we will illustrate several common examples:

1. English list or detail page creation/update time

Whether it is an article, product, or other custom content model, their creation and update time are stored in timestamp format.

Example code:

{# 假设这是在一个文档列表的循环中，或者文档详情页直接获取 archive 对象 #}
<div>
    <span>发布日期：{{stampToDate(item.CreatedTime, "2006年01月02日")}}</span>
    <span>更新时间：{{stampToDate(item.UpdatedTime, "2006-01-02 15:04")}}</span>
</div>

{# 如果是在文档详情页直接调用当前文档的时间 #}
<div>
    <p>文章发布于：{{stampToDate(archive.CreatedTime, "2006/01/02")}}</p>
    <p>最后更新于：{{stampToDate(archive.UpdatedTime, "01-02 15:04:05")}}</p>
</div>

2. Comment time in the comment list

The time of user comments also needs to be clearly displayed.

Example code:

{# 假设这是在一个评论列表的循环中 #}
{% for comment in comments %}
    <div>
        <p>{{comment.UserName}} 于 {{stampToDate(comment.CreatedTime, "2006年1月2日 15:04")}} 评论：</p>
        <p>{{comment.Content}}</p>
    </div>
{% endfor %}

3. Login/Expiration time in user information

When displaying user personal information, such as the last login time or VIP membership expiration time, formatting is equally important.

Example code:

{# 假设这是在一个用户详情页 #}
{% userDetail userInfo with name="LastLogin" id="1" %}
{% userDetail vipExpire with name="ExpireTime" id="1" %}
<div>
    <p>上次登录：{{stampToDate(userInfo, "2006-01-02 15:04")}}</p>
    <p>VIP 到期：{{stampToDate(vipExpire, "2006年01月02日")}}</p>
</div>

Flexible and diverse formatting examples

Mastered the reference time formatting rules of the Go language, you can create various date and time display effects you want.

The format you want to display stampToDateformat string Example output (assuming timestamp is1609470335i.e. January 1, 2021, 11:05:35)
Year-Month-Day "2006-01-02" 2021-01-01
Year/Month/Day (Chinese) "2006年01月02日" 2021年01月01日
Month/Day/Year "01/02/2006" 01/01/2021
Hour:Minute (24-hour format) "15:04" 11:05
Time: minute: second (24-hour format) "15:04:05" 11:05:35
Time: minute AM/PM (12-hour format) "3:04PM" 11:05AM
Year-Month-Day Time: minute "2006-01-02 15:04" 2021-01-01 11:05
Week, Day Month Year "Mon, 02 Jan 2006" Fri, 01 Jan 2021
Complete date and time (with timezone) "2006-01-02T15:04:05Z07:00" 2021-01-01T11:05:35Z+08:00

Tip:

  • Go language reference time memory method:There is a simple mnemonic to help remember the reference time in Go language: '1st of 2nd, 3:4:5 PM, 2006'. Corresponding to:01(month),02(day),03(PM hour, also known as1524-hour system),04(minute),05(second),2006(year).
  • stampToDateWithdateThe difference between filters:AnQiCMS template also has anotherdateFilter ({{obj|date:"格式"}}) But please note,dateThe filter is only applicable to Go language's nativetime.TimeAn object of type, rather than a direct numeric timestamp. For the 10-digit timestamps commonly used in AnQiCMS databases, it is imperative to usestampToDateLabel formatting.

Summary

stampToDateThe label is the core tool for handling date and time display in AnQiCMS templates.Through understanding its formatting mechanism based on the reference time of the Go language, you can easily convert the original timestamp into various easy-to-read and design-satisfying date and time formats, thereby enhancing the user experience and professionalism of the website's content presentation.Use this tag flexibly, and it will make your website content more vivid and user-friendly.

Common Questions (FAQ)

1. Why does it show a string of numbers instead of the date format I want when I use it directly in the template?{{item.CreatedTime}}instead of the date format I want when I use it directly in the template?

This is becauseitem.CreatedTimeIt stores a standard 10-digit Unix timestamp internally in AnQiCMS, which is purely numeric. To display it in the common date and time format we are familiar with, you need to usestampToDatetags