Date and Time
The Date and Time section in the menu panel allows you to change how the clock looks and behaves.
Table of contents
Options
Clock Mode
This radio button allows you to change the clock mode between 12-hour and 24-hour time.
When using the 24-hour clock mode, the AM/PM indicator is hidden.
| 12-hour mode | 24-hour mode |
|---|---|
 |  |
As of version 1.6.0, the clock mode is set automatically based on your system’s current setting.
Time Zone
Customize your clock’s timezone with this dropdown menu. By default, your current time zone is selected.
The dropdown menu is automatically populated with the time zones your browser supports via Intl.supportedValuesOf('timeZone').
// Function to get the list of time zones and group them by region
function getTimeZonesByRegion() {
const timeZones = (Intl as any).supportedValuesOf('timeZone');
const timeZoneGroups: { [key: string]: string[] } = {};
timeZones.forEach((timeZone) => {
const [region] = timeZone.split('/');
if (!timeZoneGroups[region]) {
timeZoneGroups[region] = [];
}
timeZoneGroups[region].push(timeZone);
});
return timeZoneGroups;
}
Display System
This menu allows you to change how the clock is displayed, offering different radix systems, conversions, and a few experimental options.
Radix Systems
Choosing a different radix system will change the number of digits used to represent numbers:
| Radix | Description |
|---|---|
| Binary (Base 2) | Base 2, using only the digits 0 and 1. Example: 6:30 is displayed as “110:11110”. |
| Octal (Base 8) | Base 8, using the digits 0 to 7. Example: 6:30 is displayed as “6:36”. |
| Decimal (Base 10) | Base 10, the default way to represent numbers. |
| Hexadecimal (Base 16) | Base 16, using the digits 0 to 9 and the letters A to F. Example: 6:30 is displayed as “6:1E”. |
| Hexatrigesimal (Base 36) | Base 36, using the digits 0 to 9 and the letters A to Z. Example: 6:30 is displayed as “6:U”. |
Conversions
Conversions give you fun ways to display the time:
| Conversion | Description |
|---|---|
| Emoji | Displays the time in number emoji blocks. Example: 6:30 is displayed as “6️⃣:3️⃣0️⃣”. |
| Roman Numerals | Displays the time in Roman numerals. Example: 6:30 is displayed as “VI:XXX”. |
| Words | Displays the time in English words. Example: 6:30 is displayed as “six:thirty”. |
Technical
These Display Systems are more geared towards tech-savvy users. They provide you with accurate Unix timestamps.
| Technical Display System | Description |
|---|---|
| Unix timestamp (Milliseconds) | Displays the time as the number of milliseconds since the Unix epoch. |
| Unix timestamp (Seconds) | Displays the time as the number of seconds since the Unix epoch. |
| Time until Y2K38 problem | Displays remaining time until Y2K38 problem, where computers representing time with a signed 32-bit integer will overflow after 3:14:07 UTC on January 19, 2038 and likely explode. |
Time Bar
The time bar is a new addition which replaces the legacy Seconds Bar. It is a wide horizontal bar that displays the progress of time. It’s width increases as time passes according to the chosen setting.
You cannot enable the Time Bar if a border style is selected.
| Setting | Description |
|---|---|
| Week progress (Mon-Sun) | Displays the progress through the week, from Monday through Sunday. Example: If it is Sunday, the bar will be 100% full. |
| Month progress | Displays the progress through the month. Example: If it is the 15th of the month, the bar will be 50% full in a 30-day month. The calculation changes automatically based on the number of days in the month. |
| Day progress | Displays the progress through the day. Example: If it is 6:00 PM (18:00), the bar will be 75% full. |
| Hour progress | Displays the progress through the hour. Example: If it is 15 minutes into the hour, the bar will be 25% full. |
| Seconds | Displays the progress through the minute. Example: If it is 15 seconds into the minute, the bar will be 25% full. |
Date Display
If you prefer a different date format other than the default, you can change that here. Each option is localized based on your browser’s locale and updates automatically as the date changes.
The table below lists the different tokens Luxon uses for each date format:
| Date format token | Description |
|---|---|
| D | Localized numeric date (3/1/2025) |
| DD | Localized date with abbreviated month (Mar 1, 2025) |
| DDD | Localized date with full month (March 1, 2025) |
| DDDD | Localized date with full month and weekday (Saturday, March 1, 2025) |
| Off | The date is hidden |
Date Alignment
You can change the alignment of the date relative to the clock’s width. By default, the date is left aligned under the clock.
Border Style
You can set the border style of the clock to give it a sort of “frame” around the time, providing a bit of separation between the time and the date.
By default, there is no border style selected. You can change the border style to “Box” or “Bottom”, both of which have the “Solid”, “Dashed”, “Dotted”, and “Double” options.
You cannot select a border style if the “Time Bar” is enabled.
| Border Style | Solid | Dashed | Dotted | Double |
|---|---|---|---|---|
| Box |  |  |  |  |
| Bottom |  |  |  |  |
You may need to open the images in a new tab to see the border styles in detail.
Custom Note
You may add a custom note to the page. It can hold any text within 75 characters. A few examples of what it can be used for is quotes, reminders, jokes, etc. Additionally, you can choose between top and bottom alignment.
The custom note will also reflect any changes to font customization. However, font size is not applied to the custom note.
The custom note can be exported along with your other settings.
Time Refresh Method
The Time Refresh Method checkbox lets you toggle between two methods of updating the time. By default, this is unchecked.
- Default: The clock attempts to automatically sync with the system time by the second.
- Legacy Refresh Method: The clock refreshes on a set interval, every 250 milliseconds.
Why is this an option? The new method of updating the time can be more accurate, but it depends on the browser’s ability to keep a consistent interval, which browsers like Firefox struggle with.
The legacy method, on the other hand, maintains accuracy up to 250 milliseconds, updating much more frequently at the cost of slightly increasing CPU usage.
Here’s a look into the underlying code which is responsible with updating the clock display:
// Sync clock to system time function
let clockInterval: NodeJS.Timeout | null = null; // Variable to store the interval ID
// Function to start the clock based on the selected method
function startClock() {
// Clear any existing interval
if (clockInterval) {
clearInterval(clockInterval);
}
if (menu.legacyrefreshcheckbox.checked) {
startOldClock();
} else {
startNewClock();
}
}
// Function to start the new clock method
function startNewClock() {
const timeToNextSecond = 1000 - Number(getLuxNow('millis')) % 1000;
setTimeout(() => {
updateTime();
updatePageDuration();
// Start the regular interval updates
let lastUpdateTime = Date.now();
clockInterval = setInterval(() => {
updateTime();
updatePageDuration();
logConsole('Time, date, and page duration updated...', 'info');
const now = Date.now();
const elapsed = now - lastUpdateTime;
lastUpdateTime = now;
const drift = elapsed - 1000;
// Add a maximum drift threshold, e.g. 1000ms
const cappedDrift = Math.max(Math.min(drift, 1000), -1000);
if (Math.abs(drift) > 150) {
logConsole(`Time drift detected: ${drift > 0 ? '+':''}${drift}ms.${Math.abs(drift) > 1000 ? ` Capped to ${cappedDrift}ms` : ''}`, 'debug');
clearInterval(clockInterval!);
setTimeout(startNewClock, 1000 - cappedDrift);
}
}, 1000);
}, timeToNextSecond);
}
// Function to start the old clock method
function startOldClock() {
clockInterval = setInterval(() => {
updateTime();
updatePageDuration();
logConsole('Time, date, and page duration updated (Legacy method)...', 'info');
}, timeRefresh) as unknown as NodeJS.Timeout;
}