Elapsed Time

Elapsed Time shows a Duration between two Date objects.

Options

type ElapsedTimeProps = {
    /**
     * The date from which the elapsed time is calculated.
     */
    from?: Date;
    /**
     * The date to which the elapsed time is calculated.
     */
    to?: Date;
    /**
     * A format string for how the duration is displayed.
     */
    format?: string;
    /**
     * A formatter to display the duration in the given format.
     */
    formatter?: UseDurationFormats;
};

Available Formats

For a full overview of Durations refer to the reference.

Format	Description
Y	Outputs duration in years.
M	Outputs duration in months.
W	Outputs duration in weeks .
D	Outputs duration in days.
h	Outputs duration in hours.
m	Outputs duration in minutes.
s	Outputs duration in seconds.

TIP

The number of formatting flags directly correlates to the minimum digits that will be shown. Consider an example where 1 year has passed, Y will result in 1. YY will result in 01, and YYY will result in 001. This pattern can be used for all the flags.

Basic Example

This example uses the default values. It calcuates the elapsed time from when the clock starts to the current time and is formatted with [mm]:[ss].

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

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

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

Stops the Clock

Countdown from now to 10 seconds in the future. The clock will stop it when it reaches 0.

import { add, css, elapsedTime, flipClock, theme } from 'flipclock';

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

flipClock({
    parent,
    face: elapsedTime({
        from: add(new Date, {seconds: 10}),
        to: new Date,
    }),
    theme: theme({
        dividers: ':',
        css: css({
            fontSize: '3rem'
        })
    })
});

New Years Countdown

Countdown to the next new year. Notice, this example also shows labels, which are formatted in the same structure as [WW]:[DD]:[hh]:[mm]:[ss].

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

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

flipClock({
    parent,
    face: elapsedTime({
        to: new Date(`${new Date().getFullYear() + 1}-01-01`),
        format: '[WW]:[DD]:[hh]:[mm]:[ss]'
    }),
    theme: theme({
        dividers: ':',
        labels: [['Weeks'], ['Days'], ['Hours'], ['Minutes'], ['Seconds']],
        css: css({
            fontSize: '3rem'
        })
    })
});

Time Since Unix Epoch

Show the time since the Unix Epoch.

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

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

flipClock({
    parent,
    face: elapsedTime({
        from: new Date(0),
        format: '[YY]:[DD]:[hh]:[mm]:[ss]'
    }),
    theme: theme({
        dividers: ':',
        labels: [['Years'], ['Days'], ['Hours'], ['Minutes'], ['Seconds']],
        css: css({
            fontSize: '3rem'
        })
    })
});