githubEdit

πŸ•Time

Display dates and times with semantic markup using the Time component in Webstudio.

See MDN: <time>arrow-up-right

The Time component displays formatted dates and times with support for localization. It renders a semantic <time> HTML element and allows you to format dates according to different languages, countries, and formats.

When to Use

Use Time for:

  • Blog post publication dates

  • Event dates and times

  • Last updated timestamps

  • Any date/time display that needs localization

How to Use

  1. Drag a Time component from Components > General onto your canvas

  2. Set the datetime value (the actual date/time data)

  3. Configure the display format using the formatting properties

  4. Optionally bind dynamic dates from your CMS

Properties

Some commonly used properties (see the Settings panel for all available options):

Core Properties

Property
Description

datetime

The date/time value (ISO 8601 format recommended)

Formatting Properties

Property
Description
Example Values

language

Language code for localization

en, es, fr, de, ja

country

Country code for regional formatting

US, GB, DE, JP

dateStyle

How to display the date

full, long, medium, short

timeStyle

How to display the time

full, long, medium, short

format

Custom format using tokens

DDDD, MMMM DD, YYYY

Custom Date Formatting

For more control over date display, use the format property with these tokens:

Date Tokens

Token
Description
Example

YYYY

4-digit year

2025

YY

2-digit year

25

MMMM

Full month name

January

MMM

Short month name

Jan

MM

2-digit month

01

M

Month number

1

DDDD

Full day name

Monday

DDD

Short day name

Mon

DD

2-digit day

05

D

Day number

5

Time Tokens

Token
Description
Example

HH

24-hour format

14

H

Hour (24-hour)

14

hh

12-hour format

02

h

Hour (12-hour)

2

mm

Minutes

30

m

Minutes (no zero)

30

ss

Seconds

45

s

Seconds (no zero)

45

a

am/pm

pm

A

AM/PM

PM

Format Examples

For the date 2025-01-20T14:30:00:

Format
Result

DDDD, MMMM DD, YYYY

Monday, January 20, 2025

MMM DD, YYYY

Jan 20, 2025

DD/MM/YYYY

20/01/2025

YYYY-MM-DD

2025-01-20

DDD, MMM D

Mon, Jan 20

HH:mm:ss

14:30:00

h:mm A

2:30 PM

Localized Names

Month and day names adapt to the language property:

  • en: Monday, January

  • es: lunes, enero

  • fr: lundi, janvier

  • de: Montag, Januar

  • ja: ζœˆζ›œζ—₯, 1月

circle-info

When using custom format tokens, month and day names are automatically localized based on the language property, making it easy to create multilingual sites.

Date Style Examples

For the date 2025-01-20:

Style
en-US
de-DE

full

Monday, January 20, 2025

Montag, 20. Januar 2025

long

January 20, 2025

20. Januar 2025

medium

Jan 20, 2025

20.01.2025

short

1/20/25

20.01.25

Using with Dynamic Data

When binding dates from a CMS or API:

  1. Bind the datetime property to your date field

  2. Optionally bind language to a dynamic value for multilingual sites

  3. The component will format the date according to your settings

Example Expression

Localization

The Time component is essential for multilingual sites:

  1. Set the language property to match the page language

  2. For dynamic language, bind to system.params.lang (if using language in URL)

  3. The date will automatically format according to locale conventions

Semantic HTML

Time renders as a <time> element with a datetime attribute:

This helps search engines and assistive technologies understand the date.

Last updated

Was this helpful?