Consistent and locale-aware date and time formatting

DateTime component renders locale-aware customizable date and time strings.

💡️

See DateTime story (opens in a new tab).

Import

import {DateTime} from 'koval-ui';

Preview

DateTime demo

Provide a value to render

Component expexts value prop as string representing time stamp in a simplified format (opens in a new tab) based on ISO 8601 (opens in a new tab).

const ISOString = new Date('03 October 2012 12:36 UTC').toISOString(); // => "2012-10-03T12:36:00.000Z"

Demo

import {DateTime} from 'koval-ui';
export default () => {
    return (
        <DateTime
            value="2012-10-03T12:36:00.000Z"
            era="long"
            year="numeric"
            month="long"
            weekday="long"
            day="numeric"
            hour="numeric"
            minute="numeric"
            second="numeric"
            hour12="false"
            timeZoneName="long"
            enableNoWrap="true"
            locale="en-US"/>
    );
};

Open Sandbox

Number formatting Inputs