Date, Time and Currency Formatter

When creating applications, it's often necessary to display dates, times and currencies to users in a format that's easily understandable. This feature allows us to convert dates and times from ISO format to a more human-readable format and converts numerical data into a currency format, ensuring that currency symbols, decimal separators match the conventions familiar to the user.

What is an ISO format? ISO 8601 is an international standard covering the worldwide exchange and communication of date and time-related data.

ISO 4217:2015 specifies the structure for a three-letter alphabetic code and an equivalent three-digit numeric code for the representation of currencies. The most common ISO Date Format yyyy-MM-dd — for example, "2000-10-31". The most common ISO Date Time Format is yyyy-MM-dd'T'HH:mm:ss. SSSXXX — For example, "2000-10-31T01:30:00.000-05:00" An ISO currency example, The US dollar is represented as USD and Euro is represented as EUR.

👉 The tags

📍 Where to add the tag: A text element.

Date and Time

Converts an IOS format to specific date and time formats.

[format:date:short:<value>] 31/01/2024
[format:date:medium:<value>] Jan 31, 2024
[format:date:long:<value>] January 31, 2024 at time X
[format:date:time:<value>] 11:30

If you're binding the text, use:

[format:date:short] 31/01/2024
[format:date:medium] Jan 31, 2024
[format:date:long] January 31, 2024 at time X
[format:date:time] 11:30

Example: For the date 2024-01-31 or 2024-01-31T10:30:00Z, annotate it with [format:date:medium:2024-01-31T10:30:00Z] to display it as Jan 31, 2024.

Currencies

Converts a number from API into a selected currency. All ISO currency format with 3 letters are supported.

[format:currency:<EUR|USD…>:] 

Example:

For the amount 2500.5, annotate it with [format:currency:USD] to display it as 2.500,5 US$

💾 Example design file

https://www.figma.com/community/file/1350143268643068761www.figma.com

Your feedback is valuable to us. If you have any suggestions or questions, please don't hesitate to reach out to us in the community.