Clock

Clock shows a Date object in any given format.

Options

type ClockProps = {
    /**
     * Specify a date used to start the display on the clock.
     */
    date?: Date;
    /**
     * A format string for how the date is displayed.
     */
    format?: string;
    /**
     * A formatter to display the date in the given format.
     */
    formatter?: UseDateFormats | UseDateFormatsOptions;
};

Available Formats

For a full overview of Date Formatting refer to the reference.

Format	Description	Outputs
Q	The quarter year (1-4)	1
YYYY	4 digit year	2024
YY	2 digit year	24
M	1 digit month	1
MM	2 digit month	01
MMM	Abbreviated month	Jan
MMMM	The full month	January
D	1 digit day of the month	1
DD	2 digit day of the month	01
DDD	Abbreviated day of the week	Mon
DDDD	Full day of the week	Monday
H	1 digit hour (1-24)	1
HH	2 digit hour (01-24)	01
h	1 digit hour (1-12)	1
hh	2 digit hour (01-12)	01
m	1 digit minute	1
mm	2 digit minute	01
s	1 digit second	1
ss	2 digit second	01
v	1 digit millisecond	1
vv	2 digit millisecond	01
vvv	1 digit millisecond	001
vvvv	2 digit millisecond	0001
A	"AM" or "PM"	AM
a	"am" or "pm"	am

Basic Example

This example uses the default values. It starts on the current time and is formatted with [hh]:[mm]:[ss][A].

import { clock, css, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    face: clock(),
    theme: theme({
        dividers: ':',
        css: css({
            fontSize: '3rem'
        })
    })
});

24-Hour Clock

Like real life, a clock is not always showing the current time. This example shows a 24-hour clock that starts on a specific date in the past.

import { clock, css, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    face: clock({
        date: new Date('2025-01-01 18:30'),
        format: '[HH]:[mm]:[ss]'
    }),
    theme: theme({
        dividers: ':',
        css: css({
            fontSize: '3rem'
        })
    })
});

Digitizing

Digitizing in the process by which individual characters are display on a clock. Consider the following format: [hh]:[mm]:[ss][A]. The letters are date formatting flags. The brackets denote groups. Groups are not required, but allow for more control over the markup and styling of the clock.