Clock

Clock displays a Date in the given format.

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

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

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

Instantiate

function clock(props?: ClockProps): Clock;

Props

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;
};

Returns

class Clock implements Face {
    /**
     * The starting date on the clock. If no date is set, the current time
     * will be used.
     *
     * @public
     */
    readonly date: Date;
    /**
     * The current formatted value.
     *
     * @public
     */
    readonly value: FaceValue<string>;
    /**
     * The format string.
     *
     * @public
     */
    format: string;
    /**
     * The duration formatter.
     *
     * @public
     */
    formatter: UseDateFormats;
    /**
     * Instantiate the clock face.
     *
     * @public
     */
    constructor(props?: ClockProps);
    /**
     * The face's current value.
     *
     * @public
     */
    faceValue(): FaceValue<string>;
    /**
     * Format the face value to the current date/time.
     *
     * @public
     */
    interval(instance: FlipClock<Clock>): void;
}