@numeraswiss/ns-dateformatting

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.