Valor de fecha y hora
Uso
Este es un componente de utilidades para renderizar y dar formato a los datos, por eso, no hay pautas de UX específicas.
Código
<DateValue date={new Date('2025-01-15')} />
Instrucción de importación
import { DateValue } from '@jutro/components';
Contrato de componentes
Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.
Propiedades
className- Tipo
stringDescripciónCSS class name for this component.
date- Tipo
DateDescripciónThe date to display.
displayFormat- Tipo
'vshort' | 'short' | 'long' | 'abbreviated' | 'full'DescripciónThe date format used to display the date.
id- Tipo
stringDescripciónUnique identifier for the component.
inputFormat- Tipo
stringDescripciónFormat of the date displayed when the value is edited. Used to retrieve tokens that will be displayed.
path- Tipo
stringDescripciónSpecifies the path to the value used to generate the output.
placeholder- TipoDescripción
The string to display if 'date' is undefined/null.
prefix- TipoDescripción
Optional prefix message to be attached before the value.
skipTimeZone- Tipo
booleanDescripciónIf set to
true, the date won't be converted to defaultTimezone. Use if the date is already converted to the desired time zone. suffix- TipoDescripción
Optional suffix message to be attached after the value.
tag- Tipo
stringDescripciónThe HTML tag to use when rendering the outermost element of this component.
Valor predeterminado'div' value- Descripción
A value to convert into a Date. See later in this document for explanation of accepted formats.
DateObjectValueShape
El tipo DateObjectValueShape es un objeto que representa una fecha. Tiene las siguientes propiedades:
yearobligatorio- Tipo
numberDescripciónYears counting from 0 CE.
day- Tipo
numberDescripciónThe day of the month. Max value depends on the month and whether it is a leap year.
hour- Tipo
numberDescripciónHour of the day, following the 24 hour clock. Must be between 0 and 23 inclusive.
minute- Tipo
numberDescripciónMinute of the hour. Must be between 0 and 59 inclusive.
month- Tipo
numberDescripciónMonth of the year counted from 0. For example, 0 is January, 1 is February, and so on.
Formatos válidos para la propiedad de valor
La propiedad value acepta los siguientes formatos:
| Tipo | Formato previsto |
|---|---|
string | yyyy-dd-MM |
number | Marca de tiempo de Epoch Unix dada en milisegundos |
Date | Objeto Date JavaScript |
DateObjectValueShape | Un objeto DateObjectValueShape |
API imperativa
jutro-components ofrece la función formatDate para usar con la API de formato imperativo.
import { formatDate } from '@jutro/components';
Esto importa una función formatDate(intl, props, date) con los siguientes argumentos y tipo de retorno:
Return value
- Tipo
stringDescripciónFormatted date string.
date- Descripción
Date value override to be used instead of the one provided with props.
intl- Tipo
react.intl.IntlDescripciónAn instance of the imperative formatting API access object.
props- Tipo
DateValue.propTypesDescripciónValid properties for a
DateValueobject.
Ganchos
No hay ganchos para Valor de fecha y hora.
Claves de traducción
No hay traducciones para Valor de fecha y hora.
Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.
Escotillas de escape
Para obtener más información, consulte nuestra documentación sobre escotillas de escape.
Ejemplos
Consulte la sección Uso para obtener detalles sobre cómo diseñar un valor de fecha correctamente y las diferentes opciones de configuración que ofrecemos.
Ejemplo de valor de fecha básico
Puede utilizar el componente DateValue para renderizar una Date JavaScript.
<DateValue date={new Date('2025-01-15')} />
Ejemplo de valor
También se puede usar la propiedad value para renderizar fechas indicadas como otros tipos.
| Tipo | Formato previsto |
|---|---|
string | yyyy-dd-MM |
number | Marca de tiempo de Epoch Unix dada en milisegundos |
Date | Objeto Date JavaScript |
DateObjectValueShape | Un objeto 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
Ejemplos de displayFormat
Puede utilizar la propiedad displayFormat a fin de elegir un formato para mostrar la fecha.
<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'
/>
Ejemplo de fecha y hora
Se ignorará el componente de hora de cualquier valor ingresado. Para incluir la hora, agregue un string inputFormat que designe un componente de hora.
Tenga en cuenta que puede usar valores que no sean de string como number y DateObjectValueShape junto con un string inputFormat para incluir horas también.
// 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'
/>
Ejemplo de API imperativa
jutro-components ofrece la función formatDate para usar con la API de formato imperativo.
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