How to change Squarespace blog date format

Squarespace supports displaying blog post publication dates in various places: Blog list page, Blog post item page, or Summary block. While Squarespace allows changing localization, however the Squarespace blog date format can vary and may not meet your needs. There's no built-in method to customize the format universally, but Beyondspace provides a method to unify the publication date format across your Squarespace website and support any format you need.

This post will address the current inconsistent situation of blog date formats and how to fix it, as well as introduce the built-in method to update website localization.

Note to readers: So far, the solution applies to Squarespace blog posts only; support for events will be added soon.

Squarespace blog date format issue

Currently, the blog publication date is displayed in various places, including:

  • Blog Collection page

  • Blog item page

  • Summary block with blog source

The differences will vary between Squarespace 7.1 and 7.0 templates as well.

Squarespace's inconsistent blog date formats can lead to confusion. For example, "June 23, 2024" might display as 06/23/2024, 23/06/2024, or 2024-06-23 in different parts of the site. Such inconsistency makes it difficult for readers to understand dates without knowing the context, highlighting the need for a unified date format across the entire website.

Inconsistent Squarespace blog date format

Inconsistent blog date format: English (United States) locale

Built-in localisation setting

To change the Squarespace blog date format, you can update the website language and region settings:

Squarespace Language & Region settings

Squarespace Language & Region settings

  1. Log in to your Squarespace admin dashboard.

  2. Go to Settings > Language & Region.

  3. In the Language and Region panel, open the Site Language dropdown and change it to your preferred language (e.g., from “English (United States)” to “Danish (Greenland)”).

  4. Save your changes.

  5. Revisit the blog pages and check for the blog date format update.

This tutorial helps you to change your Squarespace website language. Selected language can change the display of publication date of blog

8 STEPS

1. The first step is to open Capture Tutorial and click Settings

Step 1 image

2. Click Site Language

Step 2 image

3. Open Language dropdown

Step 3 image

4. Choose your language. Eg: English (United Kingdom)

Step 4 image

5. View the format in REGION FORMAT EXAMPLE

Step 5 image

6. Click highlight

Step 6 image

7. Click Save

Step 7 image

8. That's it. You're done.
For more Squarespace tutorials, visit beyondspace.studio

Step 8 image

Here's an interactive tutorial

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **



Next step

The table below shows all the supported locales currently available in Squarespace. Note that the long date format is extracted from Squarespace and is intended for preview purposes; it may not exactly match the date format displayed on your site.

Let's check how Squarespace blog date format changed when the language is changed to: English (Australia) or German (Germany).

While the date format is changed based on the selected locale, the Squarespace blog date format on various places is still not consistent.

Other customisations

Hide the blog publication date

Please refer to Squarespace's official documentation for specific instructions on how to remove date from blog posts in Squarespace.

Change the blog publication date

You can find step-by-step tutorials on how to change the publication date of a blog post on this blog: how to change date on blog post squarespace

The Solution

This free Squarespace date format plugin from Beyondspace helps unify the blog date format in various places, including:

  • Blog Collection page 7.1 and 7.0 (Brine)

  • Blog item page 7.1 and 7.0 (Brine)

  • Summary blocks

To use the plugin, follow these steps:

  1. Visit the plugin page.

  2. Choose the date format you need.

  3. Copy the generated code snippet.

  4. Paste it into your Footer injection.

Squarespace date format plugin

Squarespace date format plugin

While US (United States) and CA (Canadian) users will be familiar with the date format MM/DD/YYYY (Month/Date/Year), most AU (Australian) and UK (United Kingdom) users will expect the format to be DD/MM/YYYY.

With the Squarespace date format plugin, the choice is yours. You can either choose your own date format or select from the predefined date formats listed below:

Format Example Value
dddd, D MMMM YYYY Wednesday, 26 June 2024
MMM DD, YYYY Jun 26, 2024
YYYY-MM-DD 2024-06-26
MMM DD, YYYY Jun 26, 2024
MM/DD/YYYY 06/26/2024
DD/MM/YYYY 26/06/2024
L (localized short format) 06/26/2024
LL (localized long format) June 26, 2024

Let's see how the unified date format shows on the page. For this example, I chose dddd, D MMMM YYYY.

Squarespace date format unified

Squarespace date format unified

Understanding Date Format Tokens

Tokens are placeholders used in date formatting strings to represent different parts of the date. These tokens follow the Moment.js library standard, which is widely used for parsing, validating, manipulating, and formatting dates in JavaScript. Here’s a breakdown of some common tokens and their usage:

  • YYYY: Represents the full year (e.g., 2024).

  • YY: Represents the last two digits of the year (e.g., 24 for 2024).

  • MMMM: Represents the full month name (e.g., June).

  • MMM: Represents the abbreviated month name (e.g., Jun).

  • MM: Represents the month as a two-digit number (e.g., 06 for June).

  • M: Represents the month as a single-digit number (e.g., 6 for June).

  • DD: Represents the day of the month as a two-digit number (e.g., 26).

  • D: Represents the day of the month as a single-digit number (e.g., 6).

  • dddd: Represents the full name of the day (e.g., Wednesday).

  • ddd: Represents the abbreviated name of the day (e.g., Wed).

  • dd: Represents the short form of the day name (e.g., We).

  • L: Represents the localized short date format (e.g., 06/26/2024 for US English).

  • LL: Represents the localized long date format (e.g., June 26, 2024 for US English).

These tokens are combined to create specific date formats, allowing for flexible and locale-specific date representations. You can review the complete tokens list in this page

Example Usage

For instance, using the format string dddd, D MMMM YYYY in the attached screenshot will display the date as Wednesday, 26 June 2024.

Localization Support

The script supports multilingual websites out of the box. This means you can create different language versions of your website by leveraging the page URL slug. Here’s how it works:

  1. Multilingual Setup: By setting up different URLs for each language version of your page, the script can automatically display the correct date format based on the locale specified in the URL.

  2. Example URL Slugs:

    • /es/home: Displays the Spanish locale.

    • /en/home: Displays the English locale.

Squarespace change a page URL slugs

Squarespace change a page URL slugs

Note for Weglot Users

If you are using Weglot for multilingual support, be aware that this script will not work with Weglot-powered websites. Weglot has its own mechanism for converting date formats based on the selected locale, and using this script in conjunction with Weglot may lead to conflicts or inconsistent date formatting.

Choosing Localized Formats

To ensure dates are displayed correctly based on the locale specified in the URL slugs, you need to select the localized format options in the snippet generator:

  • L: Localized short date format.

  • LL: Localized long date format.

These formats adjust the date presentation according to the locale, providing a consistent experience for users across different language versions of your site.

Conclusion

Addressing Squarespace's varied blog date formats can enhance site consistency and user experience. By utilizing Beyondspace's plugin, you can achieve consistent and professional date formatting across your Squarespace website, enhancing site usability and user experience.

Previous
Previous

Replace Esc Key Login for Squarespace via Admin Quick Access

Next
Next

Proposal: show Delivery datepicker values on Shopping Cart page