Zum Hauptinhalt springen

Datums- und Zeitwert

Datums- und Zeitwert in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Datumswerts und die verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Sie können die Komponente DateValue verwenden, um ein JavaScript-Datezu 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.

TypErwartetes Format
stringyyyy-dd-MM
numberEpoch-Unix-Zeitstempel in Millisekunden
DateJavaScript-Objekt Date
DateObjectValueShapeEin 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

displayFormat Beispiele​

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 Wertes wird ignoriert. Um auch die Zeit zu berücksichtigen, muss eine Zeichenfolge inputFormat 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