Skip to content

Import

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Date />)

Description

Value.Date is a wrapper component for displaying string values, with user experience tailored for date values.

There is a corresponding Field.Date component.

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Date />)

Relevant links

Demos

Label and value

Label text16. januar 2023
Code Editor
<Value.Date label="Label text" value="2023-01-16" />

Variant short

Label text16. jan. 2023
Code Editor
<Value.Date label="Label text" value="2023-01-16" variant="short" />

Variant numeric

Label text16.01.2023
Code Editor
<Value.Date label="Label text" value="2023-01-16" variant="numeric" />

Date range

Label text16. januar–1. april 2023
Code Editor
<Value.Date label="Label text" value="2023-01-16|2023-04-01" />

Inline

This is before the component 16. januar 2023 This is after the component

Code Editor
<P>
  This is before the component{' '}
  <Value.Date label="Label text" value="2023-01-16" inline /> This is after
  the component
</P>