Datums- und Zeitwert

Datums- und Zeitwert in Storybook

Verwendung

Dies ist eine Hilfsprogrammkomponente zum Rendern und Formatieren von Daten, daher gelten keine speziellen UX-Richtlinien.

Code

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

Importanweisung

import { DateValue } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

date

Typ

Date

Beschreibung

The date to display.

displayFormat

Typ

'vshort' | 'short' | 'long' | 'abbreviated' | 'full'

Beschreibung

The date format used to display the date.

id

Typ

string

Beschreibung

Unique identifier for the component.

inputFormat

Typ

string

Beschreibung

Format of the date displayed when the value is edited. Used to retrieve tokens that will be displayed.

path

Typ

string

Beschreibung

Specifies the path to the value used to generate the output.

placeholder

Typ

IntlMessageShape

Beschreibung

The string to display if 'date' is undefined/null.

prefix

Typ

IntlMessageShape

Beschreibung

Optional prefix message to be attached before the value.

skipTimeZone

Typ

boolean

Beschreibung

If set to true, the date won't be converted to defaultTimezone. Use if the date is already converted to the desired time zone.

suffix

Typ

IntlMessageShape

Beschreibung

Optional suffix message to be attached after the value.

tag

Typ

string

Beschreibung

The HTML tag to use when rendering the outermost element of this component.

Standardwert

'div'

value

Typ

string | number | Date | DateObjectValueShape

Beschreibung

A value to convert into a Date. See later in this document for explanation of accepted formats.

DateObjectValueShape

Typ DateObjectValueShape ist ein Objekt, das ein Datum darstellt. Es hat die folgenden Eigenschaften:

yearerforderlich

Typ

number

Beschreibung

Years counting from 0 CE.

day

Typ

number

Beschreibung

The day of the month. Max value depends on the month and whether it is a leap year.

hour

Typ

number

Beschreibung

Hour of the day, following the 24 hour clock. Must be between 0 and 23 inclusive.

minute

Typ

number

Beschreibung

Minute of the hour. Must be between 0 and 59 inclusive.

month

Typ

number

Beschreibung

Month of the year counted from 0. For example, 0 is January, 1 is February, and so on.

Gültige Formate für die value-Eigenschaft

Die Eigenschaft value unterstützt die folgenden Formate:

Typ	Erwartetes Format
string	yyyy-dd-MM
number	Epoch-Unix-Zeitstempel in Millisekunden
Date	JavaScript-Objekt Date
DateObjectValueShape	Ein DateObjectValueShape-Objekt

Imperative API

jutro-components bietet die Funktion formatDate für die Verwendung mit der imperativen Formatierungs-API.

import { formatDate } from '@jutro/components';

Dadurch wird eine Funktion formatDate(intl, props, date) mit folgenden Argumenten und folgendem Rückgabetyp importiert:

Return value

Typ

string

Beschreibung

Formatted date string.

date

Typ

string | number | Date | DateObjectValueShape

Beschreibung

Date value override to be used instead of the one provided with props.

intl

Typ

react.intl.Intl

Beschreibung

An instance of the imperative formatting API access object.

props

Typ

DateValue.propTypes

Beschreibung

Valid properties for a DateValue object.

Hooks

Für date value sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für date value.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Datumswerts und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für einen einfachen Datumswert

Sie können die Komponente DateValue verwenden, um ein JavaScript-Date zu rendern.

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

Beispiel für einen Wert

Die Eigenschaft value kann auch verwendet werden, um Datumsangaben zu rendern, die als andere Typen angegeben sind.

Typ	Erwartetes Format
string	yyyy-dd-MM
number	Epoch-Unix-Zeitstempel in Millisekunden
Date	JavaScript-Objekt Date
DateObjectValueShape	Ein DateObjectValueShape-Objekt

<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

Beispiele für displayFormat

Mit der Eigenschaft displayFormat können Sie ein Format für die Anzeige des Datums auswählen.

<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'
    />

Beispiel für Datum und Uhrzeit

Die Zeitkomponente eines eingegebenen Werts wird ignoriert. Um auch die Zeit zu berücksichtigen, muss eine inputFormat-Zeichenfolge hinzugefügt werden, die eine Zeitkomponente angibt.

Beachten Sie, dass Sie Nicht-Zeichenfolgen-Werte wie number und DateObjectValueShape zusammen mit einer inputFormat-Zeichenfolge verwenden können, um auch Uhrzeiten zu berücksichtigen.

// 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'
/>

Beispiel für eine imperative API

jutro-components bietet die Funktion formatDate für die Verwendung mit der imperativen Formatierungs-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

Änderungsprotokoll