How to format timestamp data into a readable date and time format and display it?

In website operation and content management, we often need to handle various data, among which date and time information is particularly common.However, these data are often stored in a string of seemingly unordered numbers (i.e., timestamps), which is difficult for ordinary users to understand intuitively.AnQiCMS as an efficient enterprise-level content management system fully considers this user's needs, provides a simple and powerful way, helps us convert these timestamp data into an intuitive date and time format, and present it on the website.

The template engine design of AnQiCMS draws on the syntax style of Django templates and Blade templates, making it easy for content developers to process and display data through specific tags and filters. To solve the problem of timestamp formatting, we will mainly rely on the built-in features of AnQiCMS.stampToDate.

Understand timestamps: what are they and why do they need to be formatted?

In simple terms, a timestamp is a number that represents the number of seconds elapsed since January 1, 1970, 00:00:00 UTC. In AnQiCMS, you usually encounter 10-digit Unix timestamps, such as1609470335.

Such numbers are efficient and easy to store and calculate for computers, but they are meaningless for users accessing websites.Therefore, formatting these original timestamp data into readable date and time formats such as “October 27, 2023”, “10:30 AM” or “2023-10-27 10:30:00” and so on is a key step to improving user experience.

Timestamp data source in AnQiCMS

In AnQiCMS, many core time information of the website content exists in the form of timestamps. For example, when you publish an article, update a product, or a user submits a comment, the relevant creation time (CreatedTime）、Update Time（UpdatedTimeFields such as these are stored in timestamp format. These fields are usually used as content models or list items (item) as properties.

For example, in the document details or document list, you may encounter the following fields representing timestamps:

• item.CreatedTime: Creation time of the content.
• item.UpdatedTime: Last update time of the content.
• archive.CreatedTime: The creation time of a single document.
• user.LastLogin: The last login time of the user.

Next, let's take a look at how to do theseitem.CreatedTimeTimestamp variables, converted to the date and time format we are familiar with.

Core function:stampToDateThe use of tags

AnQiCMS provides a namedstampToDateThe built-in template tag is used specifically to format timestamp data into a specified readable date and time format. This tag is very intuitive and flexible to use.

The basic syntax of its use is:{{stampToDate(时间戳变量, "格式字符串")}}

Here is the 'timestamp variable' that you want to format, for example,item.CreatedTime. The format string is used to define the key to display the date and time in the desired format.

It is worth noting that the template engine of AnQiCMS is based on Go language, and its date formatting string follows the unique rules of Go language. Unlike what we are accustomed to,YYYY-MM-DDoryyyy-MM-ddDifferent, Go language uses a fixed reference date2006-01-02 15:04:05(UTC time, i.e., 3:04:05 PM on January 2, 2006) as the format template.You only need to replace the year, month, day, hour, minute, and second in this reference date with the format characters you want, and the system will automatically generate the corresponding date and time string based on the timestamp passed in.

Here are some common formatting examples:

• Only display the date (year-month-date)If you only need to display the date, for example “2023-10-27”：

  {{stampToDate(item.CreatedTime, "2006-01-02")}}
  

• Show the full date and time (Year-Month-Day Hour:Minute:Second)If you need to display the date and time to the second, for example, "2023-10-27 10:30:00":

  {{stampToDate(item.CreatedTime, "2006-01-02 15:04:05")}}
  

• Custom Chinese formatIf you want to display it in a format more in line with Chinese habits, for example, "October 27, 2023":

  {{stampToDate(item.CreatedTime, "2006年01月02日")}}
  

• Other custom formatsYou can combine it flexibly as needed, for example, "10/27/2023" or "Friday Morning 10:30"

  {{stampToDate(item.CreatedTime, "01/02/2006")}}  {# 月/日/年 #}
  {{stampToDate(item.CreatedTime, "Mon 15:04")}} {# 星期几 时:分 #}
  

Practice exercise: Apply date format in the content list

In the actual website content display, we usually use this feature on list pages (such as article lists, product lists) or detail pages (such as article details).

Assuming we have a list of articles that include the titles and publication dates. Below is an example of how to apply in a templatestampToDateLabel example:

`twig {# Assuming