Skip to main content

Date and time value

Date and time value in Storybook

Examples​

Check out the Usage section for details about how to design a date value properly, and the different configuration options we provide.

Basic example​

You can use the DateValue component to render a JavaScript Date.

<DateValue date={ new Date('2025-01-15') }/>

Value example​

You can also use the value property to render dates given as other types.

TypeExpected format
stringyyyy-dd-MM
numberEpoch Unix Timestamp given in milliseconds
Datejavascript Date object
DateObjectValueShapeA DateObjectValueShape object
<DateValue value={ "2025-01-15" } /> // string
<DateValue value={ 1736933400000 } /> // number
<DateValue value={ new Date('2025-01-15') } />  // Date object
<DateValue value={ { year: 2025, month: 1, day: 15 } } /> // DateObjectValueShape object

displayFormat examples​

You can use the displayFormat property to choose a format to display the date.

<DateValue 
    value={ 1736933400000 }
    displayFormat='vshort'
    />
<DateValue 
    value={ 1736933400000 }
    displayFormat='short'
    />
<DateValue 
    value={ 1736933400000 }
    displayFormat='long'
    />
<DateValue 
    value={ 1736933400000 }
    displayFormat='abbreviated'
    />
<DateValue 
    value={ 1736933400000 }
    displayFormat='full'
    />

Date and time example​

The time component of any entered value will be ignored. To include the time, add an inputFormat string that designates a time component.

Note that you can use non-string values like number and DateObjectValueShape along with an inputFormat string to include times too.

// Without input format
<DateValue
    value={ "2025-01-15 09:30" }
/>
// With input format
<DateValue
    value={ "2025-01-15 09:30" }
    inputFormat='yyyy-MM-dd hh:mm'
/>
// Number with input format
<DateValue
    value={ 1736933400000 }
    inputFormat='yyyy-MM-dd hh:mm'
/>
// DateObjectValueShape with input format
<DateValue
    value={ {
        year: 2025,
        month: 0,
        day: 15,
        hour: 9,
        minute: 30,
    } }
    inputFormat='yyyy-MM-dd hh:mm'
/>

Imperative API example​

jutro-components offers the formatDate function for use with the imperative formatting API.

import { formatDate } from '@jutro/components';
import { IntlContext } from '@jutro/locale';
...
const intl = useContext(IntlContext);
...
const d1 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'abbreviated' });
const d2 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'full' })
const d3 = formatDate(intl, { }, { year: 2020, month: 2, day: 22, hour: 3, minute: 24 })
const d4 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'abbreviated', inputFormat: 'yyyy/MM/dd hh:mm',});
const d5 = formatDate(intl, { value: { year: 2020, month: 2, day: 22, hour: 3, minute: 24 }, displayFormat: 'short'});

// en-US output:
Sun, Mar 22, 2020
Sunday, March 22, 2020
Mar 22, 2020
Sun, Dec 17, 1995, 03:24 AM
March 22, 2020

// pl-PL output
niedz., 22 mar 2020
niedziela, 22 marca 2020
22 mar 2020
niedz., 17 gru 1995, 03:24
22 marca 2020