How to format dates and use the date helper in Ghost

Dates are more than just numbers on a calendar; they're the markers of relevance and recency that guide user engagement. Mastering date formatting in Ghost is essential for presenting content in a clear and compelling manner. In this guide, we'll explore practical techniques and tips to help you format dates effectively, ensuring your content stays timely, organized, and user-friendly.

Date formatting contexts

Date formatting in Ghost is useful in various contexts, all of which contribute to a better user experience and streamlined content management. Here are some key contexts where date formatting plays a crucial role:

• post template -- Displaying the publication date of blog posts is essential for providing users with context about when the content was created or updated. Properly formatted dates help users understand the timeliness and relevance of the content.

• archives and listings - Date formatting is vital in archive pages, where users may browse content based on specific dates or time ranges. Clear and consistent date presentation enables users to navigate content effectively and find relevant information quickly.

• localization - Localized date formats ensure that users from different regions can understand the temporal information provided in the content, contributing to a more inclusive user experience.

• SEO optimization - Properly formatted dates can also have SEO benefits, particularly in schema markup. Search engines use structured data to understand the content and context of web pages, including dates. Well-formatted dates can improve search engine visibility and attract more organic traffic.

Using the date helper

At its core, the {{date}} helper in Ghost is a versatile tool empowers users to display, format, and manipulate dates with ease. The date helper is using the Moment.js library.

Date helper properties:

• format - the format property will define the output from the GraphHelpers. Check out all options from moment.js
• locale and timezone - properties can be used to overwrite your site’s defaults
• timeago - to output something like "2 days ago" instead of a date

Here are some examples:

1. Default formatting

{{date published_at format="MMM DD, YYYY"}}
<!-- outputs: 'Mar 10, 2024' -->

2. Using timeago

{{date published_at timeago="true"}}
<!-- outputs: '2 days ago' -->

Formatting options with moment.js

Here's an overview of tokens which serve as placeholders that Moment.js replaces with the corresponding values from the provided date or time. Combining these tokens in various ways allows for flexible and customizable date and time formatting in Moment.js:

Year

• YYYY - Four-digit year (e.g., 2024).
• YY - Two-digit year (e.g., 24).

Month

• MM - Two-digit month (01 through 12).
• MMM - Abbreviated month name (e.g., Jan, Feb).
• MMMM - Full month name (e.g., January, February).

Day

• DD - Two-digit day of the month (01 through 31).
• ddd - Abbreviated day name (e.g., Mon, Tue).
• dddd - Full day name (e.g., Monday, Tuesday).

Hours

• HH - Two-digit hour using a 24-hour clock (00 through 23).
• hh - Two-digit hour using a 12-hour clock (01 through 12).
• h - Hour using a 12-hour clock (1 through 12).

Minutes

• mm - Two-digit minute (00 through 59).

Seconds

• ss - Two-digit second (00 through 59).

AM/PM:

• A - Uppercase AM/PM (e.g., AM, PM).
• a - Lowercase AM/PM (e.g., am, pm).

Examples

Here are just a selection of commonly used formats. Moment.js provides a wide range of formatting options to suit different requirements and preferences:

Conclusions

Mastering date formatting within Ghost is essential for presenting content clearly and compellingly. From post templates to SEO optimization, date formatting plays a vital role in enhancing user experience and streamlining content management. With the versatile Date Helper and Moment.js, content creators can effortlessly craft dynamic and personalized date displays.