59 lines
2.8 KiB
Plaintext
59 lines
2.8 KiB
Plaintext
---
|
|
title: "Date and time"
|
|
description: "Displays the current date and time."
|
|
hide_title: true
|
|
---
|
|
|
|
import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
|
|
|
|
import { AddingWidget } from "@site/src/components/widgets/adding";
|
|
import { WidgetConfig } from "@site/src/components/widgets/configuration";
|
|
import { WidgetHeader } from "@site/src/components/widgets/header";
|
|
import { clockWidget } from ".";
|
|
|
|
<WidgetHeader widget={clockWidget} categories={["Time"]} />
|
|
|
|
The clock widget displays the current date and time in a customizable format.
|
|
|
|
Advanced view turns it into a World Clock. The configured primary timezone stays prominent while New York, Paris, and
|
|
Tokyo are included as secondary defaults. You can add, rename, remove, and reorder up to six cities in widget options;
|
|
London, Sydney, and UTC are also available as quick presets.
|
|
|
|
The digital advanced view keeps the primary timezone prominent and presents every secondary city as a concise,
|
|
comparable card. The primary clock includes a segmented 24-hour rail with a current-time marker, elapsed and remaining
|
|
time, six-hour ticks, and a legend for night, dawn, day, and dusk. These phases are based on local clock time and are not
|
|
astronomical sunrise or sunset calculations. Secondary cards stop after their localized date and timezone offsets.
|
|
|
|
The compact widget remains a single numeric clock. The time-format selector shows common Day.js presets with live
|
|
examples and applies to the primary clock. Choosing a format with seconds enables second-level updates; 12-hour and
|
|
24-hour display are selected through those same formats. The date-format selector likewise
|
|
shows live Day.js examples and their tokens. Secondary cities always include a short localized date and a
|
|
Yesterday, Today, or Tomorrow label relative to the primary timezone. UTC and relative offsets follow current timezone
|
|
rules, including daylight-saving changes.
|
|
|
|
Weather remains optional and uses its own configured location rather than a World Clock city. Its icon is static by
|
|
default and can be animated explicitly; reduced-motion preferences always disable animation. An unsupported saved
|
|
timezone is identified without preventing valid clocks from rendering.
|
|
|
|
### Screenshots
|
|
|
|
import localClock from "./img/local.png";
|
|
import londonClock from "./img/london-with-seconds.png";
|
|
import tokyoClock from "./img/tokyo-12-hour.png";
|
|
|
|
<div className="flex gap-1">
|
|
<img src={localClock} alt="clock format-24-hours timezone-local" width={128} height={128} />
|
|
<img src={londonClock} alt="clock format-24-hours with-seconds timezone-london" width={256} height={128} />
|
|
<img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
|
|
</div>
|
|
|
|
<WidgetInteractionGuide />
|
|
|
|
### Adding the widget
|
|
|
|
<AddingWidget />
|
|
|
|
### Configuration
|
|
|
|
<WidgetConfig configuration={clockWidget.configuration} />
|