Current Date and Time

{"@webstudio/instance/v0.1":{"instanceSelector":["J4iU2CNS-0edCVl7WVQix","QMQzyp05lyqRsOccnirmN","5xvXvC9TkYboFVR-yA6Dw","X3rhZkIyDDkizQCWG3IXl"],"children":[{"type":"id","value":"J4iU2CNS-0edCVl7WVQix"}],"instances":[{"type":"instance","id":"J4iU2CNS-0edCVl7WVQix","component":"Box","label":"Date and Time Component","children":[{"type":"id","value":"oW7AY185lIj_9Fm6lyZyL"},{"type":"id","value":"ur-nbSI85Ewdxu-5V0Vab"}]},{"type":"instance","id":"oW7AY185lIj_9Fm6lyZyL","component":"Box","label":"Date and Time","children":[]},{"type":"instance","id":"ur-nbSI85Ewdxu-5V0Vab","component":"HtmlEmbed","label":"JS","children":[]}],"styleSourceSelections":[{"instanceId":"oW7AY185lIj_9Fm6lyZyL","values":["YCdZfvU3QGaIlVSS09Sxa"]}],"styleSources":[{"type":"local","id":"YCdZfvU3QGaIlVSS09Sxa"}],"breakpoints":[{"id":"2AQJrSP7PN3cvLY9d2vK-","label":"Base"}],"styles":[{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"YCdZfvU3QGaIlVSS09Sxa","property":"fontSize","value":{"type":"unit","unit":"rem","value":2}}],"dataSources":[],"resources":[],"props":[{"id":"jDs7BdIkaZdPLopJItng7","instanceId":"ur-nbSI85Ewdxu-5V0Vab","name":"code","type":"string","value":"<script src=\"https://drevo.b-cdn.net/Library/Custom%20Components/Current%20Date%20Time/current-date-time-v1.0.js\" type=\"module\"></script>"},{"id":"DxG1yTjFK-TU4RUGPh7SP","instanceId":"ur-nbSI85Ewdxu-5V0Vab","name":"clientOnly","type":"boolean","value":true},{"id":"oYO--ibjPBBAMpKmHzHX6","instanceId":"oW7AY185lIj_9Fm6lyZyL","name":"dv-datetime-format","type":"string","value":"D/M/Y h:m:s"},{"id":"hxS5A5oxjOqm3LvofRhZI","instanceId":"oW7AY185lIj_9Fm6lyZyL","name":"dv-datetime-timezone","type":"string","value":"-3"}],"assets":[]}}

Current Date and Time

Instructions

Overview

Easily add a live date and time display to your website with customizable formatting and timezone adjustments.

Getting Started

Quick Start

Click the Copy Component button on the top of the page.
Paste the component into your Webstudio site.

Manual Start

Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Current%20Date%20Time/current-date-time-v1.0.js"></script>[/code-block]

Add the Display Element: Place a Box element or a <div> where you want the date and time to appear, and add these custom attributes: <div dv-datetime-format="Y-M-D h:m:s" dv-datetime-timezone="0"></div>

current date and time attributes

Customization Options

Date & Time Format

Use these placeholders in the dv-datetime-format attribute:
- Y = Year (e.g., 2023)
- M = Month (e.g., 10)
- D = Day (e.g., 05)
- h = Hour (e.g., 14)
- m = Minute (e.g., 30)
- s = Second (e.g., 00)
Example: dv-datetime-format="D/M/Y h:m" → "05/10/2023 14:30"

Timezone Adjustment

Use the dv-datetime-timezone attribute to set the timezone offset from UTC.
Example: dv-datetime-timezone="2" → UTC+2
Valid range: -12 to 12

Notes

The time updates automatically every second.
If the timezone is invalid, it will show "Invalid timezone".
Only use the specified placeholders in the format string; other characters will appear as-is.