Webflow Date Formatting Script

This project provides a utility to format dates on a Webflow site using locale-specific formats based on the URL subdirectory or a default language. It is built using the Finsweet Developer Starter environment.

Features

• Supported Languages:

  • French (fr)
  • German (de)
  • Italian (it)
  • English (en)
  • Spanish (es)

• Custom Date Formats: Automatically formats elements with the ns-date-format attribute.

Installation

1. Clone the Finsweet Developer Starter and follow the instructions to set up the development environment.
2. Add the compiled JavaScript file to your Webflow site.
3. Include a script tag in your Webflow project like this:

<script defer src="http://localhost:3000/index.js" data-default-lang="fr"></script>

In this example, the default language is set to French (fr).

Usage

To format a date, add the ns-date-format attribute to any HTML element containing a date. The script will automatically format the date based on the locale and the specified format.

Example

<span ns-date-format="MMMM DD, YYYY">2024-09-28</span>

This will format the date as September 28, 2024 in English or 28 septembre 2024 in French.

Available Formats

| Format | Example Output | | --------------- | -------------------- | | DD-MM-YYYY | 28-09-2024 | | MMMM DD, YYYY | September 28, 2024 | | YYYY-MM-DD | 2024-09-28 | | HH:mm | 13:45 (24-hour) | | h:mm A | 1:45 PM (12-hour) | | DD/MM/YYYY | 28/09/2024 | | DD.MM.YYYY | 28.09.2024 | | D MMM YYYY | 28 Sep 2024 |

License

This project is licensed under the MIT License.