Valeur de date et d'heure

Valeur de date et d'heure dans Storybook

Utilisation

Il s'agit d'un composant utilitaire pour l'affichage et le formatage des données. Il n'existe donc pas de directives d'expérience utilisateur spécifiques.

Code

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

Instruction d'importation

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

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

className: Type
string
Description
CSS class name for this component.
date: Type
Date
Description
Date value override to be used instead of the one provided with props.
displayFormat: Type
'vshort' | 'short' | 'long' | 'abbreviated' | 'full'
Description
The date format used to display the date.
id: Type
string
Description
Unique identifier for the component.
inputFormat: Type
string
Description
Format of the date displayed when the value is edited. Used to retrieve tokens that will be displayed.
path: Type
string
Description
Specifies the path to the value used to generate the output.
placeholder: Type
IntlMessageShape
Description
The string to display if 'date' is undefined/null.
prefix: Type
IntlMessageShape
Description
Optional prefix message to be attached before the value.
skipTimeZone: Type
boolean
Description
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: Type
IntlMessageShape
Description
Optional suffix message to be attached after the value.
tag: Type
string
Description
The HTML tag to use when rendering the outermost element of this component.

Valeur par défaut
'div'
value: Type
string | number | Date | DateObjectValueShape
Description
A value to convert into a Date. See later in this document for explanation of accepted formats.

`DateObjectValueShape`

Le type DateObjectValueShape est un objet qui représente une date. Il possède les propriétés suivantes :

yearobligatoire: Type
number
Description
Years counting from 0 CE.
day: Type
number
Description
The day of the month. Max value depends on the month and whether it is a leap year.
hour: Type
number
Description
Hour of the day, following the 24 hour clock. Must be between 0 and 23 inclusive.
minute: Type
number
Description
Minute of the hour. Must be between 0 and 59 inclusive.
month: Type
number
Description
Month of the year counted from 0. For example, 0 is January, 1 is February, and so on.

Formats valides pour la propriété de valeur

La propriété value accepte les formats suivants :

Type	Format attendu
`string`	`yyyy-dd-MM`
`number`	Horodatage Unix d'époque exprimé en millisecondes
`Date`	Objet JavaScript `Date`
`DateObjectValueShape`	Un objet DateObjectValueShape

API impérative

jutro-components propose la fonction formatDate à utiliser avec l'API de formatage impérative.

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

Cette opération importe une fonction formatDate(intl, props, date) avec les arguments et le type de retour suivants :

Return value: Type
string
Description
Formatted date string.
date: Type
string | number | Date | DateObjectValueShape
Description
Date value override to be used instead of the one provided with props.
intl: Type
react.intl.Intl
Description
An instance of the imperative formatting API access object.
props: Type
DateValue.propTypes
Description
Valid properties for a DateValue object.

Crochets

Aucun crochet n'est disponible pour date value.

Clés de traduction

Il n'existe aucune traduction pour date value.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une valeur de date et connaître les différentes options de configuration que nous proposons.

Exemple de valeur de date de base

Vous pouvez utiliser le composant DateValue pour afficher un fichier JavaScript Date.

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

Exemple de valeur

Vous pouvez également utiliser la propriété value pour afficher des dates indiquées comme d'autres types.

Type	Format attendu
`string`	`yyyy-dd-MM`
`number`	Horodatage Unix d'époque exprimé en millisecondes
`Date`	Objet JavaScript `Date`
`DateObjectValueShape`	Un objet DateObjectValueShape

<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

Exemples `displayFormat`

Vous pouvez utiliser la propriété displayFormat pour choisir un format d'affichage de la 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'
    />

Exemple de date et d'heure

Le composant d'heure de toute valeur saisie sera ignoré. Pour inclure l'heure, ajoutez une chaîne inputFormat qui désigne un composant d'heure.

Notez que vous pouvez utiliser des valeurs autres qu'une chaîne comme number et DateObjectValueShape avec une chaîne inputFormat pour inclure des heures également.

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

Exemple d'API impérative

jutro-components propose la fonction formatDate à utiliser avec l'API de formatage impérative.

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

Valeur de date et d'heure

Utilisation

Code

Instruction d'importation

Cahier des charges du composant

Propriétés

`className`

`date`

`displayFormat`

`id`

`inputFormat`

`path`

`placeholder`

`prefix`

`skipTimeZone`

`suffix`

`tag`

`value`

`DateObjectValueShape`

`year`obligatoire

`day`

`hour`

`minute`

`month`

Formats valides pour la propriété de valeur

API impérative

Return value

`date`

`intl`

`props`

Crochets

Clés de traduction

Portes de sortie

Exemples

Exemple de valeur de date de base

Exemple de valeur

Exemples `displayFormat`

Exemple de date et d'heure

Exemple d'API impérative

Journal des modifications

Utilisation​

Code​

Instruction d'importation​

Cahier des charges du composant​

Propriétés​

className​

date​

displayFormat​

id​

inputFormat​

path​

placeholder​

prefix​

skipTimeZone​

suffix​

tag​

value​

DateObjectValueShape​

yearobligatoire​

day​

hour​

minute​

month​

Formats valides pour la propriété de valeur​

API impérative​

Return value​

date​

intl​

props​

Crochets​

Clés de traduction​

Portes de sortie​

Exemples​

Exemple de valeur de date de base​

Exemple de valeur​

Exemples displayFormat​

Exemple de date et d'heure​

Exemple d'API impérative​

Journal des modifications​

Utilisation

Code

Instruction d'importation

Cahier des charges du composant

Propriétés

`className`

`date`

`displayFormat`

`id`

`inputFormat`

`path`

`placeholder`

`prefix`

`skipTimeZone`

`suffix`

`tag`

`value`

`DateObjectValueShape`

`year`obligatoire

`day`

`hour`

`minute`

`month`

Formats valides pour la propriété de valeur

API impérative

Return value

`date`

`intl`

`props`

Crochets

Clés de traduction

Portes de sortie

Exemples

Exemple de valeur de date de base

Exemple de valeur

Exemples `displayFormat`

Exemple de date et d'heure

Exemple d'API impérative

Journal des modifications